前言
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筛选,.开头为类筛选,无前缀为标