Easy UI datagrid的学习

我就是我 2023-10-16 20:39 28阅读 0赞

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

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

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

![Center][]

这个就是界面。

首先我下载的是最新的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

参数说明：

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"排序。

其实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;

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

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

[Center]: https://img-blog.csdn.net/20141110172726233?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGlhbnRhbmdfMTk4Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center