jqgrid 的使用

$(document).ready(function() {$.jgrid.defaults.styleUI = 'Bootstrap';$("#table_list_2").jqGrid({datatype : "json", //将这里改为使用JSON数据 url : 'http://localhost/rly-web/rest/coc/fboxv/getDmonentriesList', //这是Action的请求地址 mtype : 'POST',height : 450,autowidth : true,shrinkToFit : true,multiselect : true,cellsubmit: 'clientArray', //设置某列为编辑框属性，必写cellEdit : true, //设置某列为编辑框属性，必写colNames : [ '监控点', '所属换热站', '监控点名称', '数值','状态', '描述' ], //对应的表的列名colModel : [ {name : 'id',index : 'id',key : true,width : 120}, {name : 'boxName',index : 'boxName',width : 90}, {name : 'name',index : 'name',width : 100}, {name : 'value',index : 'value',editable : true,width : 80,align : "center",sorttype : "float",cellEdit :true //对应列设置可以编辑}, {name : 'state',index : 'state',width : 50,align : "center",sorttype : "float"}, {name : 'desc1',index : 'desc1',width : 100, //对应列宽} ],pager : '#pager_list_2',rowNum : 10,rowList : [ 10, 20, 30 ],sortname : 'name',//默认排序列sortable : true,sortorder : 'asc', //排序viewrecords : true,height : "100%",jsonReader : {root : "list",page : "page",total : "totalPage",records : "totalRecords",repeatitems : false},gridComplete : function() {if ($("#table_list_2").jqGrid("getRowData").length > 0) { //判断分页$("#zwsj").css("display","none");} else {$("#pager_list_2").css("display", "none");}},//获取全选或全部选的值onSelectAll : function(rowId,status) {rowIds = jQuery("#table_list_2").jqGrid('getGridParam','selarrrow');// for(var i=0;i<rowIds.length;i++){//           var gridData= $("#table_list_2").jqGrid("getRowData",rowIds[i]);//这是获得 某一行的数据          // alert(gridData.boxName);//   }},//获取单行选中的值onSelectRow : function(rowId,status, e) {rowIds = jQuery("#table_list_2").jqGrid('getGridParam','selarrrow');$('#table_list_2').jqGrid('editRow', rowId, true,function (rowId) {    window.rowId=rowId;});jQuery("#table_list_2").saveRow(rowId, false, 'clientArray');var recs=$("#table_list_2").jqGrid("getRowData",rowId);// id = recs.id;// value = recs.value;alert(recs.id+"   "+recs.boxName+"    "+recs.value);// updateValue(id,value);},//点击复选框时选中行beforeSelectRow : function(rowid, e) {if (e.type == 'click') {i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),cm = jQuery("#table_list_2").jqGrid('getGridParam','colModel');return (cm[i].name == 'cb'); //当点击的单元格的名字为cb时，才触发选择行事件}return false;},});$("#table_list_2").setSelection(4, true);$(window).bind('resize',function() {var width = $('.jqGrid_wrapper').width();$("#table_list_2").setGridWidth($(window).width() * 0.99);$('#table_list_2').setGridWidth(width);});  //定时器10秒加载一次setInterval("ratioTime()", 200000);});}//定时任务执行function ratioTime() {var nowDate = new Date().getTime();var ratioDate = (nowDate - date) / 1000 / 60; //获取运行总时间if (ratioDate > 119) { //停止定时器// clearInterval("ratioTime()");alert("登录超时，请您重新登录!");window.location.href = "http://localhost/rly-web?type=1";}}//开启监控点function start() {var ids = '';if (rowIds=='' || rowIds == null) {alert("未选中要操作的记录！");return;}else{for(var i=0; i<rowIds.length; i++){ids +=rowIds[i];if(i<rowIds.length-1){ids +=",";}}}//确定要执行选中的记录吗？if (confirm("确定要执行该操作吗？")) {$.ajax({type : "post",dataType:"json",url : 'http://localhost/rly-web/rest/coc/dmon/start',data : {startParam : ids,token : token},success : function(result) {if (result.msg == '200') {alert("操作成功！");//开启成功后 启动数据实时检测$.ajax({type : "post",dataType:"json",url : 'http://localhost/rly-web/rest/coc/dmon/startConnPushData',success : function(result) {},error : function() {// alert("操作失败！");}})// reload();} else {alert(result.lt);}},error : function() {alert("操作失败！");}});}}//停止监控点function stop() {var ids = '';if (rowIds=='' || rowIds == null) {alert("未选中要操作的记录！");return;}else{for(var i=0; i<rowIds.length; i++){ids +=rowIds[i];if(i<rowIds.length-1){ids +=",";}}}//确定要执行选中的记录吗？if (confirm("确定要执行该操作吗？")) {$.ajax({type:"post",dataType:"json",url:'http://localhost/rly-web/rest/coc/dmon/stop',data:{stopParam:ids,token:token},success:function(result) {if (result.msg == '200') {alert("操作成功！");} else {alert(result.lt);}},error : function() {alert("操作失败！");}});}}//数据同步function synchronization(){$.ajax({type : "post",url : 'http://localhost/rly-web/rest/coc/user/schedulingJobs',data : {token : token},success : function(data) {if(data.msg==1){alert("数据同步成功！");}},error : function() {alert("数据同步失败！");}});}//双击事件function copyText(id) {$("#value" + id).attr("readonly", false);}//修改监控点值function editValue(id) {$("#value" + id).attr("readonly", true);}//将写入的值传入后台 function postValue(){$("#table_list_2").jqGrid('setGridParam',{url : "http://localhost/rly-web/rest/coc/fboxv/getDmonentriesList",postData : {'searchvalue' : searchvalue}, //发送数据 page : 1}).trigger("reloadGrid"); }//条件查询方法 $(function() {$("#find_btn").click(function() {var searchvalue = $("#searchvalue").val();$("#table_list_2").jqGrid('setGridParam',{url : "http://localhost/rly-web/rest/coc/fboxv/getDmonentriesList",postData : {'searchvalue' : searchvalue}, //发送数据 page : 1}).trigger("reloadGrid"); //重新载入 });});   //联想查询的方法function search() {$.ajax({type : 'post',data : {patientName : $("#searchvalue").val()}, //获取到id为searchvalue的输入框的值，通过ajax传到后台url : "http://localhost/rly-web/rest/coc/fboxv/getKeyword", //后台获取数据的urldataType : "json",success : function(data) {if (data == "error" || data == null || data == "") {return;}aResult = data;//将后台返回的值存入aResult集合$("#searchvalue").autocomplete({source : aResult});}});}</script></head><body class="gray-bg"><div class="wrapper wrapper-content  animated fadeInRight"><div class="row"><div class="col-sm-12"><div class="ibox "><div class="ibox-title"><h5>数据采集操作面板</h5></div><div class="ibox-content"><!--  <h4 class="m-t">高级用法</h4> --><div class="jqGrid_wrapper m-b"><div style="float: left;padding-left: 20px;padding-top: 13px;">   <button id="syn" onclick="synchronization()" class="btn btn-info">同步</button><button id="start" onclick="start()" class="btn btn-info">开启</button><button id="stop" onclick="stop()" class="btn btn-info">停止</button></div><div class="search d1"><form id="formSearch" class="form-horizontal"style="margin-top: -35px; float: right"><div class="form-group" style="margin-top: 15px"><div class="col-sm-2" style="margin-left: 170px"><input type="text" onkeyup="search()" class="form-control"style="width: 300px; color: #080808"placeholder="监控点ID，所属热换站，监控点名称" id="searchvalue" /></div><div class="col-sm-1" style="text-align: center;"><button type="button" id="find_btn" class="btn btn-info"></button></div></div></form></div></div><div id="zwsj">暂无数据</div><div class="jqGrid_wrapper"><table id="table_list_2"></table><div id="pager_list_2"></div></div></div></div></div></div></div></body></html>