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",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);
//下面写异步操作
}