SIPAIIS_WMS_JSSW/WebRoot/jsp/process/dataVisualCamera4Select.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.sipai.tools.SessionManager"%>
<%
	SessionManager sessionManager = new SessionManager();
%>
<%@page import="com.sipai.entity.scada.MPoint"%>
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%> 
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%> 
<script type="text/javascript">
 var dosearchCamera = function() {
        $("#table_camera").bootstrapTable('refresh');
    };
	function doselect(dialog,grid) {
        var checkedItems = $("#table_camera").bootstrapTable('getAllSelections');
        var datas="";
        $.each(checkedItems, function(index, item){
            if(datas!=""){
                datas+=",";
            }
            datas+=item.id;
        });

        $.post(ext.contextPath + '/process/dataVisualCamera/dosave.do',{frameId:'${param.frameId}',datas:datas},function(data) {
            closeModal("cameraSubModal");
            showContent('${param.frameId}');
        });
        console.log(datas);
        closeModal("cameraSubModal")
    };
    
    
    var $table;  
    function queryParams(params) {
        var temp={
                rows: params.limit, // 每页要显示的数据条数
                page: params.offset/params.limit+1, // 每页显示数据的开始页码
                sort: params.sort, // 要排序的字段
                order: params.order, 
                search_name : $('#search_name').val(),
            };
        return temp;
    }
    $(function() {
        $table=$("#table_camera").bootstrapTable({ // 对应table标签的id
        	url: ext.contextPath + '/work/camera/getList.do', // 获取表格数据的url
            //cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            clickToSelect:true, 
            striped: true,  //表格显示条纹，默认为false
            pagination: true, // 在表格底部显示分页组件，默认false
            pageList: [10, 20], // 设置页面可以显示的数据条数
            pageSize: 20, // 页面数据条数
            pageNumber: 1, // 首页页码
            sidePagination: 'server', // 设置为服务器端分页
            // responseHandler:responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
            queryParams: queryParams,
            queryParamsType: "limit",
            sortName: 'name', // 要排序的字段
            sortOrder: 'asc', // 排序规则
            columns: [
                {
                    checkbox: true // 显示一个勾选框
                },{
                    field: 'name',
                    title: "摄像头名称",
                    align: 'center',
                    valign: 'middle',
                    width: '50%'
                }, {
                    field: 'url',
                    title: "摄像头ip",
                    align: 'center',
                    valign: 'middle',
                    width: '50%',/*
                    formatter:function(value,row,index){
                      return row.processSection.name;
                    }*/
                }
            ],
            onLoadSuccess: function(){  //加载成功时执行
                adjustBootstrapTableView("table_camera");
            },
            onLoadError: function(){  //加载失败时执行
                  console.info("加载数据失败");
            }
      
      })
      
    //绑定选中事件、取消事件、全部选中、全部取消  
      $table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {  
            var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {  
                     return row.id;  
            });
             func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';  
            //  selectionIds = _[func](selectionIds, ids);
       });  
    });
    //选中事件操作数组  
    var union = function(array,ids){  
        $.each(ids, function (i, id) {  
            if($.inArray(id,array)==-1){  
                array[array.length] = id;  
            }  
         });  
        return array;  
    };  
    //取消选中事件操作数组  
    var difference = function(array,ids){  
          $.each(ids, function (i, id) {  
               var index = $.inArray(id,array);  
               if(index!=-1){  
                   array.splice(index, 1);  
               }  
           });  
          return array;  
    };  
    var _ = {"union":union,"difference":difference};  
     
    //表格分页之前处理多选框数据  
    function responseHandler(res) {  
          $.each(res.rows, function (i, row) {  
              row.checkStatus = $.inArray(row.id, selectionIds) != -1;  //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true  
          });  
          return res;  
    }     
	
</script>
<div class="modal fade" id="cameraSubModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">选择摄像头</h4>
      </div>
      <div class="modal-body " style="width:100%">
            <div class="form-group pull-right form-inline" >
                <div class="input-group input-group-sm " style="width: 220px;margin-left:30px">
                
                <input type="text" id="search_name" name="search_name" class="form-control " placeholder="摄像头名称">
                <div class="input-group-btn">
                    <button  class="btn btn-default" onclick="dosearchCamera();"><i class="fa fa-search"></i></button>
                </div>
                </div>
                <!-- <button type="button" class="btn btn-default" onclick="addFun();"><i class="fa fa-plus"></i> 重置</button> -->
            </div>
            <div>
                <table id="table_camera" ></table>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="doselect()">确认</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>