bootstrapTable jqGrid使用总结

项目中使用bootstrapTable展示表格，记录开发过程中遇到的问题，以便查询；
参考官网：Bootstrap Table Examples

自定义加载数据，原有的数据会被删除

$table.bootstrapTable('load', data)

插入一条行数据

$table.bootstrapTable('insertRow', {index: 0, row: {
	id: randomId,
	name: 'Item ' + randomId,
	price: '$' + randomId
}})

获取表格数据

$table.bootstrapTable('getData')

获取选中的数据

$table.bootstrapTable('getSelections')

删除数据

var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
	return row.id
})
$table.bootstrapTable('remove', {
	field: 'id',
	values: ids
})

父页面打开子页面（弹窗）

layer.open({
  type: 2, 
  content: 'add.html' //可以是同级目录的页面
}); 

子页面（弹窗）传值到父页面

let row = $("#test").bootstrapTable('getSelections');//获得选中的行数据
window.parent.doCallback(row);//doCallback(row)是在父页面定义的方法，可以处理得到的row数据

//关闭弹窗
let index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

js传递List数据到后端

let array = [];
let user1 = {"id": 1, "name": "huage"};
let user2 = {"id": 2, "name": "heihei"};
array.push(user1);
array.push(user2);
let data = {"userList": array};

$.ajax({
  type: 'post',
  url: url,
  data: JSON.stringify(data),
  dataType: 'json',
  contentType: 'application/json',
  success: function(result){
    
  }
})

//后端处理
public Result handler(@RequestBody InfoVo vo){
  
}

public class InfoVo{
  private List<User> userList;//跟js的data中参数名称对应
}

-----------------------------------------------------------------------

​​​​​​jqGrid使用总结

1. 获取选中的一条记录（行id）

   function getSelectedRow() {
       var grid = $("#jqGrid");
       var rowKey = grid.getGridParam("selrow");
       if(!rowKey){
           alert("请选择一条记录");
           return ;
       }
       var selectedIDs = grid.getGridParam("selarrrow");
       if(selectedIDs.length > 1){
           alert("只能选择一条记录");
           return ;
       }
       return selectedIDs[0];
   }

2. 获取选中的多条记录（行id数组）

   function getSelectedRows() {
       var grid = $("#jqGrid");
       var rowKey = grid.getGridParam("selrow");
       if(!rowKey){
           alert("请选择一条记录");
           return ;
       }
       return grid.getGridParam("selarrrow");
   }

3. 弹出窗口（parking为窗口名称，弹出多个窗口时名称是不同的）

   var url = baseURL + 'admin/modules/pm/mp/pPurchaseApply.html';
   var iTop = (window.screen.height-30-500)/2;       //获得窗口的垂直位置;
   var iLeft = (window.screen.width-10-1200)/2;        //获得窗口的水平位置;
   window.open(url,'parking','height='+500+',width='+1200+',top='+iTop+',left='+iLeft+',
   　　toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');

4. 从弹出窗口获得数据，添加到第一个表格，并且根据返回数据查询后添加到第二个表格（添加本地数据到jqGrid，设置dataType为local）

   function selectD() {
       var ids = getSelectedRows();
       if(ids == null){
           return ;
       }
       var items =[];
       for(var i = 0; i <ids.length; i++){
           var rowData = $("#jqGrid").jqGrid('getRowData',ids[i]);
           items.push(rowData);
       }
       window.opener.send(items);
       window.close();
   }

   // 接收子页面传递过来的选定内容
   function send(items){
       var strs;
       for(var i = 0; i <items.length; i++){
           var rowData = items[i]
           $("#jqGrid").jqGrid('addRowData', rowData.id, rowData, 'last');
           //拼接查询参数
           if(i==0){
               strs = rowData.id;
           }else{
               strs=strs+","+rowData.id;
           }
       }
       //异步请求数据
       $.ajax({
           type: "POST",
           url: baseURL + "mp/ppurchaseapply/detailList?ids="+strs,
           async:false,
           contentType: "application/json",
           success(r){
               if(r.code == 0){
                   var o = JSON.stringify(r.detailList);
                   var dataJson = eval('(' + o + ')');
                   var ids = $("#jqGrid2").jqGrid('getDataIDs');
                   if(ids.length==0){
                       $("#jqGrid2").jqGrid('setGridParam',{
                           datatype: 'local',
                           data:dataJson,
                           page:1
                       }).trigger("reloadGrid");
                   }else{
                       var length = r.detailList.length;
                       for(var i = 0; i <length; i++){
                           var rowData = r.detailList[i]
                           $("#jqGrid2").jqGrid('addRowData', rowData.id, rowData, 'last');
                       }
                       $("#jqGrid2").jqGrid('setGridParam',{
                           datatype: 'local',
                           page:1
                       }).trigger("reloadGrid");
                   }
               }else{
                   alert(r.msg);
               }
           }
       });
   }

5. 在弹窗中获取主页面传来的参数

   //'admin/modules/pm/mp/mBiddingAgreement.html?bid='+bid;
   var url = window.location.href;
   var urlsplit = url.split("?bid=");
   var bid = urlsplit[1];

6. 设置单元格的值（）

   $("#jqGrid2").setCell(row.id,"winAmount",row.remainAmount);

7. 删除第一个表格，同时删除第二个表格数据

   function del() {
       //动态数组，每次删除时取第一条
       var ids = getSelectedRows2('jqGrid');
       if(ids == null){
           return ;
       }
       var length = ids.length;
       var ids2 = $("#jqGrid2").jqGrid('getDataIDs');
       var length2 = ids2.length;
       for(var i = 0; i <length ; i++){
           var id= ids[0];
   
           var row = $("#jqGrid").jqGrid('getRowData',id);
           for(var j=0;j < length2;j++){
               var id2 = ids2[j];
               var row2 = $("#jqGrid2").jqGrid('getRowData',id2);
               if(row.stockId==row2.stockId){
                   $("#jqGrid2").delRowData(id2);
               }
           }
           $("#jqGrid").delRowData(id);
       }
   }    

8. 使用formData传输复杂的数据

   function saveOrUpdate() {
       //组装后端数据
       var formData = new FormData();
       var ids = jQuery("#jqGrid").jqGrid('getDataIDs');
       vm.bi.applyIds=ids;
   
       $('#jqGrid2').jqGrid("saveCell", lastrow, lastcell);
       var ids2 = $("#jqGrid2").jqGrid('getDataIDs');
       var list =[];
       for(var i=0;i < ids2.length;i++){
           var row = $("#jqGrid2").jqGrid('getRowData',ids2[i]);
           list.push(row);
       }
       formData.append("list",JSON.stringify(list));
       formData.append("entity",JSON.stringify(vm.bi));
       var url = "mp/mbiddinginformation/save";
       $.ajax({
           type: "POST",
           url: baseURL + url,
           contentType: "application/json",
           data: formData,
           cache: false,
           processData: false,
           contentType: false,
           success: function(r){
               if(r.code === 0){
                   alert('操作成功', function(){
                       vm.reload();
                   });
               }else{
                   alert(r.msg);
               }
           }
       });
   }

9. 过滤重复数据

   var arr=[];//保存重复数据
   var ids_len = ids.length;
   for(var i = 0; i <item_len; i++){
       for(var a=0;a<ids_len;a++){
           if(items[i].id==ids[a]){
               arr.push(items[i]);
           }
       }
   }
   items = items.filter( function( item ) {
       return arr.indexOf( item ) < 0;
   } );