jqgird 实践

时间:2021-06-06 04:29:06
$.jgrid.defaults.styleUI="Bootstrap";
$("#table_list_2").jqGrid({
multiselect: true ,//此属性是给表格添加复选框
height:434,autowidth:true, shrinkToFit:true,/* autoScroll: false, *//*forceFit: true, *///将绿色部分改为false可以修改表格宽度
colNames:["用户ID","用户名称","用户状态","用户创建时间","用户联系方式" ,"操作 "],
colModel:[{name:"USER_ID",index:"USER_ID",autowidth:true,align:"center",
formatter:function(cellvalue, options, rowObject){
return "<a href='#' data-toggle=\"modal\" data-target=\"#myModal8\" onclick=\"opencustdetails('"+cellvalue+"')\" style='color:                  blue'>"+cellvalue+"</a>";
}}, //formatter参数可以取到本行的值,一般用作详细信息查询
{name:"USER_NAM",index:"USER_NAM",autowidth:true,editable:true,align:"center"},//editable设置为true就表示本行在添加或者修改信息时,可显示
{name:"USER_STS",index:"USER_STS",autowidth:true,editable:true,align:"center"},
{name:"USER_DATE",index:"USER_DATE",autowidth:true,editable:true,align:"center"},
{name:"USER_TEL",index:"USER_TEL",autowidth:true,editable:true,align:"center"},
{name:"edit",index:"edit",autowidth:true,editable:true,align:"center"},//edit用于操作
],
pager:"#pager_list_2",
viewrecords:true,hidegrid:false,
url:"<%=path %>/user/findUser",
datatype:'json',
rownumbers: true,
rowNum : 10,
rowList : [ 10,15,30 ],
jsonReader: {
root:"rows", page:"pageNum", total:"totalpages",
records:"totalCount", repeatitems:false, id : "id"
},
gridComplete:function () { // edit操作信息处理
var ids = jQuery("#table_list_2").jqGrid('getDataIDs', "selrow");//ids是个数组,内容是1,2,3,。。。表示表格中显示的信息序列号
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var editBtn ="<a href='#' data-toggle=\"modal\" data-target=\"#myModal5\" style='color:#f60' onclick='updateuser("+id+")'>修改</a>"+" "+"<a href='#' data-toggle=\"modal\" data-target=\"#myModal7\" style='color:#f60' onclick='rolejson("+ id +")' >角色分配</a>"; //将每列的序列号传给方法
/*var editBtn1 = "<a href='#' data-toggle=\"modal\" data-target=\"#myModal6\" style='color:#f60' onclick='purchase("+ id +")' >权限分配</a>";*/
jQuery("#table_list_2").jqGrid('setRowData', ids[i], {edit: editBtn}); //ids[i]标识那一行,setrowdata表示将本行的所有信息放进去,然后添加操作到本列。
}
}
})
$("#table_list_2").trigger("reloadGrid");//表格刷新
var model = jQuery("#table_list_2").jqGrid('getRowData', id);//在function中根据传入的id值 可以随意取到本列的值
model.本列字段名 如model.name

function batchmovebaimingdan() {
var rowData = jQuery('#table_list_2').jqGrid('getGridParam','selarrrow'); //取到复选框选中的序列号
//然后循环拿到本列的值
var arrayObj = new Array();
for (var i = 0; i < rowData.length; i++) {
var id = rowData[i];
var model = jQuery("#table_list_2").jqGrid('getRowData', id);//取本列所有值
var BCI_ID = model.BCI_ID;//取其中一个字段
arrayObj[i] = BCI_ID;
}
alert(arrayObj);
//下面写异步操作
}