您的位置：首页 > Web前端 > JQuery

jq.grid 前台部分功能

2018-01-06 10:41 141 查看 
<body onload="pageInit()">
<input id="username" type="hidden" value="${sessionScope.username}">
表名：<input id="ktrName">
<table id="errInfo" style="font-size:12px;" ></table>
<div id="pagered"></div>
<div id="mysearch"></div>
</body>

<script type="text/javascript">
$(function(){ pageInit(); });
function  pageInit(){
jQuery("#errInfo").jqGrid(
{
datatype: "json",
url:'GetAllErrInfo', //这是数据的请求地址
colNames: ['名称', '报错时间', '报错信息', '确认', '确认人员', '确认时间', '备注'],
colModel: [
{name: 'NAME', index: 'NAME', width: 200, sorttype: "string"},
{name: 'EVT_TIME', index: 'EVT_TIME', width: 150, sorttype: "timestamp",align : "center"},
{name: 'OPE_MSG', index: 'OPE_MSG', width: 250, sorttype: "string"},
{name: 'CONFIRM', index: 'CONFIRM', width: 80, sorttype: "string",align : "center"},
{name: 'EVT_USER', index: 'EVT_USER', width: 80, sorttype: "string",align : "center"},
{name: 'EVT_USER_TIME', index: 'EVT_USER_TIME', width: 150,  sorttype: "timestamp",align : "center"},
{name: 'REMARK', index: 'REMARK', width: 150, sorttype: "string"}
],
rowNum:2
f378
0, //每页显示记录数
autowidth:true,//自适应页面高度
height:450,
shirnkToFit:false,
rowList:[20,30,100], //可调整每页显示的记录数
pager: 'pagered', //分页工具栏，pager:分页DIV的id
sortname : 'NAME',
mtype : "post",
viewrecords: true, //是否显示行数
multiselect : true,//多选
sortorder : "asc",//排序
caption: "Editing Example",//标题
ondblClickRow : function(id) {//双击编辑
$.Pop(//弹出框，pop插件，另外下载
'<label id="OPE_MSG"   style="display: inline-block;width: 1000px;height: 400px;overflow-y: scroll;"></label>',
{
Title:"<font color='red'><label id='NAME'></label></font> 的错误信息<br>",//标题
Close:true,//是否显示关闭按钮 true(开)/false(关)
BoxDrag:false, // 是否可以移动弹出层 true(开)/false(关)
});
$(".box-button").find("div span").first().hide();
var rowData = $("#errInfo").jqGrid('getRowData',id);
$("#NAME").text(rowData.NAME);
var newString=rowData.OPE_MSG;//字符转换
newString = newString.replace(/_#br/g, '<br>');
newString = newString.replace(/_#_/g, ' ');
$("#OPE_MSG").html(newString);
},
loadComplete: function () {//加载后运行函数
$("#errInfo tbody tr:not(:first) td:nth-child(4)").each(function () {//修改title显示
$(this).attr("title", $(this).text().replace(/_#br/g, '\n').replace(/_#_/g, ' '));
//                        $(this).html($(this).text().replace(/_#br/g, '\n').replace(/_#_/g, ' '));
});
$("#errInfo tbody tr:not(:first) td:nth-child(5)").each(function () {//CONFIRM==N,显示为红色
if($(this).text()=="N"){
$(this).css({color:"red"});
}
})
}
});
jQuery("#errInfo").jqGrid('navGrid', '#pagered', {edit : false,add : false,del : false});//加载表格

};
//查询功能
function findKtrErr() {
var ktrName = $("#ktrName").val();
var err_Confirm = $("#err_Confirm").val();
if (ktrName == "") {
ktrName="ALL";
//            window.location.reload();
}
$("#errInfo").jqGrid('setGridParam',{//提交到后台
url:'FindKtrErr',
postData:{"NAME":ktrName,"err_Confirm":err_Confirm},
}).trigger('reloadGrid');
}

//处理确认,多行
function  setErr_Confirm() {
var username=$("#username").val();
var ids = $("#errInfo").jqGrid("getGridParam", "selarrrow");//获取多行
var listNAME = new Array();
var listTIME = new Array();
if(ids.length==0){
alert("请至少选择一张表！");
return;
}
for (var i = 0; i < ids.length; i++) {
var rowData = $("#errInfo").jqGrid('getRowData',ids[i]);//获取多行的数据
listNAME[i]=rowData.NAME;
listTIME[i]=rowData.EVT_TIME;
}
$("#errInfo").jqGrid('setGridParam',{
url:'ErrConfirm',
postData:{"listNAME":JSON.stringify(listNAME),'listTIME':JSON.stringify(listTIME),'username':username},
}).trigger('reloadGrid');
}

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jq.grid jquery
相关文章推荐
新的分享
章节导航