Easy UI datagrid的学习

简介: Easy UI datagrid的学习

之前写了一篇博文,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>


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



相关文章
|
12天前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
18 2
|
12天前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
24 0
|
12天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
12天前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
18 0
|
12天前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
|
5月前
|
JavaScript
【Vue学习】—Vue UI组件库(二十八)
【Vue学习】—Vue UI组件库(二十八)
|
6月前
|
XML 数据安全/隐私保护 数据格式
Morn UI 学习总结
Morn UI 学习总结
49 0
|
6月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
6月前
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
|
6月前
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作

热门文章

最新文章