【前端】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筛选，.开头为类筛选，无前缀