【前端】easyui的datagrid组件常用功能

前言

easyui是实体行业软件系统常用的前端组件库，尤其是 datagrid 组件，功能完善，可以应付众多复杂场景需求。这里就总结一下自己最近用到的几个比较重要的功能。
ps 同一种功能实现方法可能多样，我只是写出我认为的较好实现。
ps 所有演示都基于 jQuery
ps 为了方便，js脚本都嵌入html的形式写出，

基本功能

作为数据展示最重要的组件，datagrid在js脚本中，可以实现更多定制性。这里先举个例子说明如何展现简单的表格：

<div id="datagrid" class="easyui-datagrid"></div>
<script>
	$('#datagrid').datagrid({
		url: '/controller/showdata',
		columns:[[
			{filed:'id', checkbox:true, widht:"20%"},
			{filed:'name', title:'姓名', widht:"20%"},
			{filed:'age', title:'年龄', widht:"20%"},
			{filed:'birth', title:'生日', widht:"20%"},
		]],
		singleSelect: true,
		rownumbers: true,
	})
</script>

上述代码展示了一个简单的数据表格。这里提一下 easyui 的使用方法。
$ 是 jquery 替代符号，('#xxx') 是jquery 筛选器，筛选规则类似 css，#开头为id筛选，.开头为类筛选，无前缀为标签名筛选。

紧跟着筛选器的 .datagrid 是 easyui 组件函数，上述代码是 datagrid 的初始化方法，函数参数 { } 里有一些初始属性：

• url 获取数据的url链接
• columns 数据表格的列，其中每个列都是一个 easyui 对象，都有自己的属性，方法，事件。具体可以看官方文档。
• singleSelect 是否单选
• rownumbers 是否显示行号

其他属性就需要各位在官方文档中寻找使用了。

---

功能一： 主系表关联展示

功能说明：页面展示两个表，点击表1中的某一行，表2关联显示部分行。
使用到的组件功能：

• datagrid 点击事件 onClickRow(function(index, row))
• datagrid 查询重载方法 datagrid('load',{queryparam})

实现：为主表1的点击事件书写方法：获取点击行的数据主键，作为表2的查询条件，为表2执行 load 方法

<div id="dg1" class="easyui-datagrid"></div>
<div id="dg2" class="easyui-datagrid"></div>

<script>
// 这里省略两个表的初始化，就是上文介绍的，
// 以下是 dg1 主表的部分初始化代码，
$('#dg1').datagrid({
	url: '#',
	columns:[[
		{filed:'id',checkbox:true},
		/* ... */
	]],
	// ... 下面是为组件设定点击事件函数，当点击表格某行时，执行
	// index 为点击行的下标， row 为点击行的数据对象
	onClickRow: function(index, row){
		var id = row.id,
		$('#dg2').datagrid('load', {id: id}),
	}
});
</script>

load 方法的参数是一个json对象，他将作为查询信息提交给后台。

---

功能二：多条件查询

功能说明：表格数据繁多的时候，通常在表头部分会有一个筛选栏，可以按照字段、条件等执行搜索。
使用到的组件功能：

• datagrid('load', {data}) 查询重载

实现： 这个函数是官方推荐的用来查询筛选表格数据的方法。

<form id="fm">
	<input name="name" class="easyui-textbox">
	<input name="age" class="easyui-textbox">
	<input name="remark" class="easyui-textbox">
</form>
<a class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Search()">搜索</a>
<script>
	function search(){
		var flag;
		// serializeObject 将form表单转化为json对象，
	    var obj = $('#fm').serializeObject();
	    if ((obj.name == null || obj.name == '') && (obj.age == null || obj.age == '') && (obj.remark == null || obj.remark == ''))
	    {
	        $('#dg1').datagrid('load', {str: null});
	        return;
	    }
	    else {
	    	// stringify 将json对象转化为字符串
	        var str = JSON.stringify(obj);
	        $('#dg1').datagrid('load', { str: str });
	    }
	}
</script>

此功能的核心就是 load 方法。load会基于初始化的 url 去发起一次 POST 请求。

---

功能三： 表格内填充链接按钮

功能描述：如下图

使用的组件方法： 上面提到过，datagrid 的 columns 是一个 column 组件的列表，每个 column 都可以自定义，包括表格套表格也是可以实现的，这里就简单使用 链接按钮 来抛砖引玉，使用 column 的 formatter 方法
实现：

<div id="dg" class="easyui-datagrid"></div>
<script>
	$('#dg').datagrid({
		/* ... */
		columns: [[
			{field:'detail', title:'详细', align: 'center'
				formatter: function(){
					return '<a  href="javascript:" syle="text-align: center;" data-href="Inspect/PatrolInspectStdEdit?id=' + row.standardId + '" οnclick="Edit(this,' + row.standardId + ')" >详情</a>';
				},
			},
		]]
	})
</script>

formatter 是很多easyui 组件的 “格式化器”，说人话就是自定义显示内容的方法。这里对于 column，它还可以选择三个参数 value, row, index 这里没有用到就不写了。
同理，easyui 的日历组件也可以利用此方法实现“多选”、“范围选择” 等功能，这里后面有时间再说吧。

---

功能四： 分页

功能描述：这里讲讲最后一个常用功能，easyui 的 datagrid 有非常好的分页功能支持，无需我们写复杂的前后端交互逻辑。只需开启datagrid 的分页功能，datagrid就会再 执行 ajax 访问时自动提交 当前页 和 最大行数。
实现：

<div id="dg" class="easyui-datagrid"></div>
<script>
	$('#dg').datagrid({
		/* ... */
		// 开启分页功能
		pagination: true,
		// 页面控制条的位置
        pagePosition: 'bottom',
        // 默认初始页数
        pageNumber: 1,
        // 默认初始每页的行数
        pageSize: 20,
        // 每页行数可选列表
        pageList: [20, 30, 50, 100, 200],
	})
</script>

结语

好了，关于datagrid基本就总结这样，
很多功能都隐藏在官方文档中一些不起眼的函数里，他们没有官方实例，函数说明也模棱两可，给很多使用者带来不便。这里就我个人学习过程做个记录总结，帮自己复习，也帮新人降低学习曲线。