之前写了一篇博文，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" οnclick="loadData();" iconCls="icon-search" style="width:80px">搜索</button>
先写到这里，如果有什么不明白的可以讨论。
