BOUT
关于jQuery EasyUI
jQuery EasyUI是一组基于jQuery的UI插件集合体，其设计的初衷就是帮助web开发者更为轻松的打造功能丰富且美观的UI界面。EasyUI提供了大多数控件的使用，包括datagrid（数据表格）、treegrid（树形表格）、panel（面板）、combo（下拉组合）等。由于EasyUI具有简单、但功能强大等特点，受到许多web开发者的青睐，被广泛应用于页面开发中。
本文针对功能强大的datagrid控件，对datagrid的基本使用方法和在使用过程中遇到的问题进行总结。
1. 从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。
<table> <thead> <tr> <th data-options="field:'code'">编码</th> <th data-options="field:'name'">名称</th> <th data-options="field:'price'">价格</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> </tbody> </table> |
2. 通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。
<table style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">编码</th> <th data-options="field:'name',width:100">名称</th> <th data-options="field:'price',width:100,align:'right'">价格</th> </tr> </thead> </table> |
3. 使用Javascript去创建DataGrid控件。
<table id="dg"></table> $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); |
其中，第1和第2种方式适合在已知表格内容的情况下，创建方式简单明了。第3种方式优势的优势在于，当需要和后台有大量交互时，该种方式比较适合。
在DataGrid的属性中，有url和data这两个属性，利用这两个属性，都可以实现根据现有数据填充表格，以下是官方文档对这两种属性的简单介绍：
String 一个URL从远程站点请求数据。 } $('#dg').datagrid({ data: [ data array,object {f1:'value11', f2:'value12'}, {f1:'value21', f2:'value22'} ] }); |
url：/data/data.json #该种写法，从文件中读取，data.json为要展示的数据文件或者 url：/getData #该种写法，是通过路由获得数据，该路由返回的结果是一个json格式的数据
data：[
{f1:'value11', f2:'value12'},
{f1:'value21', f2:'value22'} ]
data : /getData
两种方式需要保证的是传给data的值是一个json数组。
Datagrid提供了编辑表格的功能，可以直接在表格上进行数据编辑：
如上图中第一列，editor方式设置为textbox即可。编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
在编辑表格过程中，遇到的问题是关联编辑，即在编辑一列值时，另一列的值也跟着改变，这种情况下，只需要在editor的options参数中，添加对应触发事件即可，比如，上图中，不同的hostType，monitor列的checkbox的disable属性跟着发生变化，那么可以在hostType编辑器中定义onSelect事件，控制当选择不同的主机类型，mds列的checbox分别处于可用和不可用状态。
表格编辑完成后，会向后台进行数据提交。
1.如果只是简单的提交表格中的所有数据，不必区分和上次提交的不同，可以使用getRows方法，该方法获得当前页的所有行。
2.当需要获得编辑后的改变数据，可以使用getChanges方法获得从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。
var rows = $dg.datagrid('getChanges'); if (rows.length) { var inserted = $dg.datagrid('getChanges', "inserted"); var deleted = $dg.datagrid('getChanges', "deleted"); var updated = $dg.datagrid('getChanges', "updated"); var effectRow = new Object(); if (inserted.length) { effectRow["inserted"] = inserted; } if (deleted.length) { effectRow["deleted"] = deleted; } if (updated.length) { effectRow["updated"] = updated; } } |
注：datagrid在分页情况下，一次性获取所有页的所有行是行不通的。因为分页时，后台查询的数据只有本页的值，所以不可能获取所有数据，只能获得当前数据。
EasyUI是一个好用且功能全面的js UI框架，利用EasyUI，可以制作简单优美的页面。因为其具有轻量级、开源、官方文档齐全等优点，被广泛应用于界面设计中。