jqgird 实践

$.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",autotrue,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",autotrue,editable:true,align:"center"},//editable设置为true就表示本行在添加或者修改信息时,可显示
                          {name:"USER_STS",index:"USER_STS",autotrue,editable:true,align:"center"},
                          {name:"USER_DATE",index:"USER_DATE",autotrue,editable:true,align:"center"},
                          {name:"USER_TEL",index:"USER_TEL",autotrue,editable:true,align:"center"},
                          {name:"edit",index:"edit",autotrue,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);
//下面写异步操作
}




原文地址:https://www.cnblogs.com/guokai870510826/p/5716080.html