jEasyUI 创建自定义视图学习笔记
概述
jEasyUI 是一款易于使用的基于 jQuery 的 UI 库，拥有大量现成的 UI 组件，可以快速搭建出漂亮的界面。除了内置的组件外，jEasyUI 也支持创建自定义的视图组件。
创建自定义视图组件
要创建自定义视图组件，需要继承 $.fn.datagrid.defaults.view 对象，并实现以下方法：
render：渲染视图组件。refresh：刷新视图组件。resize：重置视图组件的尺寸。
下面是一个简单的自定义视图组件示例，它以表格形式展示数据，并添加了一个“点击查看详情”的按钮：
javascriptCopy Code$.extend($.fn.datagrid.defaults.view, {
render: function(target, container, frozen) {
var state = $.data(target, 'datagrid');
var opts = state.options;
var rows = state.data.rows;
var fields = $(target).datagrid('getColumnFields', frozen);
if (frozen) {
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
return;
}
}
container.html('<table class="datagrid-btable" cellspacing="0" cellpadding="0"></table>');
var table = container.find('table');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var tr = $('<tr></tr>').appendTo(table);
for (var j = 0; j < fields.length; j++) {
var field = fields[j];
var col = $(target).datagrid('getColumnOption', field);
if (col && !col.hidden && !col.checkbox) {
var td = $('<td></td>').appendTo(tr);
td.attr('field', field);
if (col.align) {
td.attr('align', col.align);
}
if (opts.nowrap == false) {
td.css('white-space', 'normal');
}
td.html(opts.formatter ? opts.formatter(row[field], row) : row[field]);
}
}
var detailBtn = '<a href="#" onclick="showDetail('+i+')">查看详情</a>';
tr.append($('<td></td>').html(detailBtn));
}
},
refresh: function(target, params) {
this.render(target, $(target).datagrid('getPanel').find('div.datagrid-view > div.datagrid-view2 > table'), false);
},
resize: function(target, width) {
this.refresh(target);
}
});
function showDetail(index) {
var row = $('#dg').datagrid('getData').rows[index];
alert('Name: ' + row.name + '\nAge: ' + row.age + '\nAddress: ' + row.address);
}
使用自定义视图组件
要使用自定义视图组件，只需要在 datagrid 初始化时将 view 属性设置为自定义视图组件的对象即可：
javascriptCopy Code$('#dg').datagrid({
view: myView,
// ...
});
其中 myView 就是自定义视图组件的对象。
示例
下面是一个完整的示例。我们创建了一个带有自定义视图组件的 datagrid，并且可以通过点击“查看详情”按钮来展示每一行的详细信息：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jEasyUI 自定义视图组件示例</title>
<link rel="stylesheet" type="text/css" href="./easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
<script type="text/javascript" src="./easyui/jquery.min.js"></script>
<script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$.extend($.fn.datagrid.defaults.view, {
render: function(target, container, frozen) {
var state = $.data(target, 'datagrid');
var opts = state.options;
var rows = state.data.rows;
var fields = $(target).datagrid('getColumnFields', frozen);
if (frozen) {
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
return;
}
}
container.html('<table class="datagrid-btable" cellspacing="0" cellpadding="0"></table>');
var table = container.find('table');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var tr = $('<tr></tr>').appendTo(table);
for (var j = 0; j < fields.length; j++) {
var field = fields[j];
var col = $(target).datagrid('getColumnOption', field);
if (col && !col.hidden && !col.checkbox) {
var td = $('<td></td>').appendTo(tr);
td.attr('field', field);
if (col.align) {
td.attr('align', col.align);
}
if (opts.nowrap == false) {
td.css('white-space', 'normal');
}
td.html(opts.formatter ? opts.formatter(row[field], row) : row[field]);
}
}
var detailBtn = '<a href="#" onclick="showDetail('+i+')">查看详情</a>';
tr.append($('<td></td>').html(detailBtn));
}
},
refresh: function(target, params) {
this.render(target, $(target).datagrid('getPanel').find('div.datagrid-view > div.datagrid-view2 > table'), false);
},
resize: function(target, width) {
this.refresh(target);
}
});
function showDetail(index) {
var row = $('#dg').datagrid('getData').rows[index];
alert('Name: ' + row.name + '\nAge: ' + row.age + '\nAddress: ' + row.address);
}
</script>
</head>
<body>
<table id="dg" class="easyui-datagrid" style="height: 300px" data-options="
url:'data.json',
view: myView,
rownumbers: true,
singleSelect: true,
pagination: true
">
<thead>
<tr>
<th data-options="field:'name'">Name</th>
<th data-options="field:'age'">Age</th>
<th data-options="field:'address'">Address</th>
</tr>
</thead>
</table>
</body>
</html>
在实际应用中，可以根据具体场景来自定义视图组件的样式、功能等。