Easy UI datagrid的学习

来源：互联网发布：js点击超链接编辑：程序博客网时间：2024/04/29 06:19

之前写了一篇博文，socket监控的。http://blog.csdn.net/tiantang_1986/article/details/40982113

里面使用了Easy UI来做页面显示，也提供了项目的下载，大家可以去看看，这篇文章算是对它的一个补充吧。

使用之后表示Easy UI很强大很灵活，好多功能还不是很熟悉，需要慢慢消化。这里介绍一下datagrid的用法。

这个就是界面。

首先我下载的是最新的EasyUI-1.4。官网：http://www.jeasyui.com/index.php，里面很多例子，大家可以研究一下

在页面上引入jquery.js及jquery.easyui.min.js

还有样式：easyui.css、icon.css、color.css、demo.css 这几个都是easyui自带的。

然后建立一个table

<table id="dg" title="Monitor List" class="easyui-datagrid" style="width:80%;height:500px"data-options="url:'monitor.do',fit: true,rownumbers: true, pagination: true,singleSelect: false,remoteSort:false,toolbar: '#tb,#toolbar'"><thead><tr><th field="ip" checkbox="true"></th><th field="name" width="16%" sortable="true">主机名</th><th field="code" width="16%" sortable="true">主机编号</th><th field="address" width="17%" sortable="true">地    址</th><th data-options="field:'currStatus',styler: function(status, row, index){if(status=='异常')return 'color:red;';else if(status=='正常')return 'color:#00A600;';else return 'color:goldenrod;';}" width="16%" sortable="true">当前状态</th><th field="createTime" width="16%" sortable="true">获取时间</th><th field="version" width="16%" sortable="true">版本号</th></tr></thead></table>

参数说明：

url：必填项，是easyui访问的url，可以是你的action访问地址，也可以是**.json，保证是一个合法的访问地址。然后它就会自动去加载数据了，返回数据是json格式的。

fit：是否自动填充，我理解是全屏的意思。
ruwnumber：是否显示行号。
pagination：是否显示分页
singleSelect：是否是单行选择
remoteSort:排序。我这里设置false，在th里面再提供sortable="true" 可以对该列进行排序
toolbar：是个很有意思的功能。为了界面好看。把你的div放进去。toolbar: '#tb,#toolbar' 表示有两个div在toolbar里面，如下
第一个是查询，第二个是操作项。可以分开写，顺序无所谓，它根据你toolbar:'#tb,#toolbar' 定义的顺序显示。
th里面的field就是你数据里面的字段了。
如<th field="ip" checkbox="true"></th>表示取IP的值，checkbox=true表示是多选框。可以看图。
后面的也是一样的，注意一下：sortable="true"排序。

<th data-options="field:'currStatus',styler: function(status, row, index){if(status=='异常')return 'color:red;';else if(status=='正常')return 'color:#00A600;';else return 'color:goldenrod;';}" width="16%" sortable="true">当前状态</th>

其实table、th都有两种写法（大家可以自行百度），这是第二种。
styler: function(status, row, index){}是对字段特殊化处理的一种方式.看我贴的第一张图，根据不同状态来显示不同的颜色。除了这个还有及formatter: function(status, row, index){}功能更为强大一点，可以根据自己的情况来处理。
定时刷新功能使用了setInterval("loadData()", 10000);定时器函数，表示每10秒钟调用一次loadData()函数，再调用$("#dg").datagrid("reload")可以实现，或者$("#dg").datagrid("load")。两者的区别就是如果有分页的话，一个停在当前页面，一个返回第一页。
下面是我的实现：

function loadData() {var params={name:$("#name").val(),startTime:$("#startTime").val(),endTime:$("#endTime").val(),address:$("#address").val(),version:$("#version").val(),status:$("#status").val()    };    $("#dg").datagrid('options').queryParams=params;     $("#dg").datagrid("reload");};

这里是带参数查询。用到$("#dg").datagrid('options').queryParams=params;

首先获取输入框的值，然后传递过来。这里不影响查询按钮的实现，一样调用该方法。

<button class="easyui-linkbutton" onclick="loadData();" iconCls="icon-search" style="width:80px">搜索</button>

先写到这里，如果有什么不明白的可以讨论。

0 0