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", //后台获取数据的url
dataType : "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>