httpMon.js
$(function(){ getServiceState(); run(); }); var interval; function run(){ interval = setInterval(ajaxGetSerState,"3000"); //3秒钟刷一下 } function ajaxGetSerState() { $.ajax({ type: 'POST', url: $.test.contextPath + '/MonAction.do?method=getState', dataType: 'json', success: function(data) { if ($.isNotEmpty(data) && $.isNotEmpty(data.error)) { return; } $("#datagrid").datagrid("loadData",data); }, error: function(XMLHttpRequest, textStatus, errorThrown) { } }); } /** * 初始化 */ function getServiceState() { $('#datagrid').datagrid({ url: $.test.contextPath + '/MonAction.do?method=getState', striped: true, collapsible: true, remoteSort: false, fit: true, fitColumns: true, singleSelect: true, pageNumber: 1, nowrap:false, pageSize: 10, pagination: false, columns : [ [ { field : 'serviceName', title : '名称', width : 70, align:'left', formatter : function(value, row, index) { return row.serviceName; } }, { field : 'serviceState', title : '状态', width : 270, align:'left', editor: { type: 'validatebox', options: { required: true } }, formatter : function(value, row, index) { if(row.serviceState == 200){ return row.serviceState; }else{ return "<div style=\"width: 908px;margin:0 auto;border:red 0px solid;display:block;word-break: break-all;word-wrap: break-word;color:red \">"+row.serviceState+"</div>"; } } } ] ], rownumbers: true, onLoadSuccess: function(data){ } }); }
jsp:
<body> <div id="toolbar" style="padding: 1px; height: auto;"> <!-- 查询 --> <div> <form id="queryForm" method="post" novalidate> <table style="margin-top: 2px; border: none; border-collapse: collapse; border-spacing: 50px;"> <tr> <td><a href="javascript:void(0)" class="button button-rounded button-flat-primary" onclick='getServiceState();'> <i class="icon-ccw icon-padding-right5"></i>手动刷新 </a> </td> </tr> </table> </form> </div> </div> <table id="datagrid" class="easyui-datagrid" style="width: 100%; height: 100%" data-options="width:800,height:500,idField:'keyid', iconCls:'icon-tip',striped: true,fitColumns:true,singleSelect:true, maximized:true,remoteSort: false,rownumbers:true"></table> <script type="text/javascript" src="<%=request.getContextPath()%>/pages/monitor/httpMon.js"></script> </body>
相关推荐
easyui 可编辑datagrid完整例子,支持filebox 项目中的数据库使用的是mysql,内置sql脚本,执行脚本即可创建数据
easyui datagrid 嵌套datagrid form 简单提交 ,刷新子表数据
easyui-datagrid之间拖拽效果demo
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
easyui的datagrid的数据渲染
JS EasyUI DataGrid动态加载数据
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyui的datagrid中editor和combobox的级联,在datagrid中编辑项是下拉框的实现方式
easyUI,datagrid小样例
easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip easyui\easyui-datagrid14-demo.zip easyui\easyui-datagrid15-demo....
内含数据库 及存储过程 主要以easyUI+JQuery+Ajax 实现后台数据交互的tree 及DataGrid 希望能帮到你的学习!
easyui的datagrid中editor和combogrid的结合使用,datagrid中编辑项是下拉表的实现方式
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
EasyUI DataGrid过滤用法实例
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
easyui的datagrid生成合并行,合计计算价格!