bootstrap table分页模板和获取表中的ID方法


Posted in Javascript onJanuary 10, 2017

1.dao层

   MyBatis映射

   mapper.xml中

<select id="getTcdt" parameterType="com.ls.entity.Mydata" resultMap="BaseResultMap">
  select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order}
 </select>

   mapper.java中

public List<Tb_communication_device_tbl> getTcdt(Mydata data);//分页查询

2.业务层service

/**
  * 实现分页显示
  */
  @Override
  public JSONObject getTcdt(Mydata data) {
    // TODO Auto-generated method stub
    JSONObject result=null;
    List<Tb_communication_device_tbl> md=tbdao.getTcdt(data);
    List<Tb_communication_device_tbl> resultList = new ArrayList<Tb_communication_device_tbl>() ;
    //判断前台页面传回的值是不是空不是进行条件模糊查询
        if(null!=data.getStationNr() && !data.getStationNr().trim().equals("")||data.getWellDbk()!=null&&data.getWellDbk().trim().equals("")){
      for(Tb_communication_device_tbl user :md){
        if(user.getStationNr().indexOf(data.getStationNr()) >= 0){
          resultList.add(user);
        }
      }
    }else{
      resultList = md;
    }
    //获取分页数据
    int pageNumber = null!=data.getDangqian() ? Integer.parseInt(data.getDangqian()) : 0;
    int pageSize = null!=data.getFrist() ? Integer.parseInt(data.getFrist()) : 10;
    int start = (pageNumber) * pageSize;//计算开始记录数
    int end = start+pageSize;//计算结束记录数
    md= new ArrayList<Tb_communication_device_tbl>() ;
    for(int i=start;i<end && i<resultList.size();i++){
      Tb_communication_device_tbl e=resultList.get(i);
     md.add(e);
         }
    int total=0;
    //存储值map中
    Map<String, Object> map=new HashMap<String, Object>();
    SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd");
      //实现数据类型转换主要是日期类型转换成字符串
            List<Mydate> list=new ArrayList<>(); 
      for (int i = 0; i < md.size(); i++) {
        Mydate my=new Mydate();
        my.setAlarmVoltage(md.get(i).getAlarmVoltage());
        my.setBatteryElectricQty(md.get(i).getBatteryElectricQty());
        my.setInstallDate(sf.format(md.get(i).getInstallDate()));
        //my(md.get(i)));
        my.setDeviceClass((md.get(i).getDeviceClass()));
        my.setLevelElevationAlarm((md.get(i).getLevelElevationAlarm()));
        my.setNewWellDbk(md.get(i).getNewWellDbk());
        my.setOperationDate(sf.format(md.get(i).getOperationDate()));
        my.setReadoutFrequency(md.get(i).getReadoutFrequency());
        my.setRemark(md.get(i).getRemark());
        my.setReturenValueBln(md.get(i).getReturenValueBln());
        /*my.setSendingcycle(md.get(i).getSendingcycle());
        my.setSendingstarttime(md.get(i).getSendingstarttime());*/
        my.setShowingBln(md.get(i).getShowingBln());
        my.setSignalAlarm(md.get(i).getSignalAlarm());
        my.setSimcardNr(md.get(i).getSimcardNr());
        my.setStationNr(md.get(i).getStationNr());
        my.setTransmittingFrequency(md.get(i).getTransmittingFrequency());
        my.setUserId(md.get(i).getUserId());
        my.setWaterTemperatureAlarm(md.get(i).getWaterTemperatureAlarm());
        my.setWellDbk(md.get(i).getWellDbk());
        my.setWorkingStatus(md.get(i).getWorkingStatus());
        list.add(my);
      }
      map.put("total", resultList.size());
      map.put("rows", list);
      //存入返回值中
      result=JSONObject.fromObject(map);
    return result;
  }

3.action层        

public String execute(){
      String pageNO=null;
      String pageSize=null;
      if(offset==null||limit==null){
       pageNO ="0";
       pageSize="10";
      }else{
         pageNO =offset;
         pageSize=limit;
      }
        //给对象赋值
        Mydata data=new Mydata();
      data.setDangqian(pageNO);
      data.setFrist(pageSize);
      //System.out.println(wells);
      data.setStationNr(departmentname);
      data.setWellDbk(wells);
      data.setOrder(order);
      //点击列头获取属性因为属性和数据库列名不一样所以排序要进行修改列名
      if(ordername==null){
        data.setOrdername("STATION_NR");
        }
      if(ordername!=null){
      if(ordername.equals("deviceClass")){
        data.setOrdername("DEVICE_CLASS");
      }
      if(ordername.equals("stationNr")){
        data.setOrdername("STATION_NR");
      }
      if(ordername.equals("batteryElectricQty")){
        data.setOrdername("BATTERY_ELECTRIC_QTY");
      }
      if(ordername.equals("simcardNr")){
        data.setOrdername("SIMCARD_NR");
      }
      if(ordername.equals("wellDbk")){
        data.setOrdername("WELL_DBK");
      }
      if(ordername.equals("installDate")){
        data.setOrdername("INSTALL_DATE");
      }
      }
    result=tb_communication_device_tblservice.getTcdt(data);
    list=tB_MONITOR_WELL_TBLservice.getTmwt();//获取外键的值
    Map<String, Object> map=ActionContext.getContext().getSession();
    map.put("list", list);//
    map.put("offset2", offset);
    map.put("limit1", limit);
    return SUCCESS;
  }

js文件

var TableInit = function () {
      var oTableInit = new Object();
      var stationNr=null;
      var stationNr2=null;
      var arr=new Array();
      var arr1=new Array();
      //定义查询方法
      Array.prototype.indexOf = function(val) {
         for (var i = 0; i < this.length; i++) {
           if (this[i] == val) return i;
         }
         return -1;
       };
       Array.prototype.remove = function(val) {
         var index = this.indexOf(val);
         if (index > -1) {
           this.splice(index, 1);
         }
       };
      //初始化Table
      oTableInit.Init = function () {
        $('#tb_departments').bootstrapTable({
           url: 'tcdtaction', //请求后台的URL(*)
           method: 'get', //请求方式(*)
           toolbar: '#toolbar', //工具按钮用哪个容器
           striped: false, //是否显示行间隔色
           cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
           pagination: true, //是否显示分页(*)
           sortable: true, //是否启用排序
           sortOrder: "asc", //排序方式
           queryParams: oTableInit.queryParams, //传递参数(*)
           sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
           pageNumber: 1, //初始化加载第一页,默认第一页
           pageSize: 10, //每页的记录行数(*)
           pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
           search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
           strictSearch: false,//设置为 true启用 全匹配搜索,否则为模糊搜索
           // showExport表示是否显示导出的按钮,exportDataType表示导出的模式是当前页、所有数据还是选中数据。
           sortable:true,//设置为false 将禁止所有列的排序
           searchOnEnterKey:true,//设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
           showColumns: true, //是否显示所有的列
           showRefresh: true, //是否显示刷新按钮
           showExport: true,//是否显示导出
           showpaginationswitch:true,//是否显示 数据条数选择框
           minimumCountColumns: 2, //最少允许的列数
           clickToSelect: true, //是否启用点击选中行
           height: 532, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
           uniqueId: "id", //每一行的唯一标识,一般为主键列
           showToggle: true, //是否显示详细视图和列表视图的切换按钮
           cardView: false, //是否显示详细视图
           detailView: true, //是否显示父子表
           exportTypes: ['csv','txt','xml'],
           exportDataType: "basic", 
           columns: [{
             align: "center",
             checkbox: true
           }, 
           {
             field: 'stationNr',
             title: '站号',
             align: "center",
             sortable: true,
             editable: true
           }, {
             field: 'deviceClass',
             title: '通讯设备类型',
             align: "center",
             sortable: true,
             editable: true
           }, {
             field: 'batteryElectricQty',
             title: '电池电量',
             align: "center",
             sortable: true,
             editable: true
           }, 
           {
             field: 'simcardNr',
             title: 'SIM卡号',
             align: "center",
             sortable: true,
             editable: true
           },
           {
             field: 'wellDbk',
             title: '统一编号',
             sortable: true,
             align: "center",
             editable: true
           },
           {
             field: 'installDate',
             title: '安装日期',
             sortable: true,
             align: "center",
             editable: true
           },
           {
             field: 'operate',
             title: '操作',
             sortable: true,
             align: "center",
             editable: true,
             formatter:function(value,row,index){ 
               var e = '<a  onclick="edit(\''+ row.stationNr + '\')">查看详情</a> '; 
                  return e; 
                }
           },
           ],
           onCheckAll:function(rows){//全选中
             var arr2=new Array();
             var arr3=new Array();
             arr2=$("#tb_departments").bootstrapTable('getSelections');
             for (var i = 0; i < arr2.length; i++) {
               arr3=arr2[i]
               for(var s in arr3)
                arr.push(arr3.stationNr);//添加数值到数组\
              }
             var n = []; //一个新的临时数组
              for(var h = 0; h < arr.length; h++) //遍历当前数组
              {
                //如果当前数组的第i已经保存进了临时数组,那么跳过,
                //否则把当前项push到临时数组里面
                if (n.indexOf(arr[h]) == -1){
                  n.push(arr[h]);
              }
              }
              arr=n
           document.getElementById("ddd").value=arr; 
           },
           onUncheckAll:function(rows){//全选不中
             arr=[];//清空数组
             document.getElementById("ddd").value=arr; 
           },
           onUncheck:function(row){//不选中
             stationNr2=row.stationNr; //取出id
             arr.remove(stationNr2);
             document.getElementById("ddd").value=arr; 
           },
           onCheck:function(row){//选中
             //alert("2")
             stationNr2=row.stationNr; //取出id
             arr.push(stationNr2);//添加数值到数组\
             //去除重复元素
              var s = arr.join(",")+","; 
             for(var i=0;i<arr.length;i++) { 
             if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) { 
              arr.remove(arr[i]);
              document.getElementById("ddd").value=arr; 
              break; 
             } 
             }
             document.getElementById("ddd").value=arr; 
           },
           onClickRow:function(row,$element){
             $('.success').removeClass('success');
             $($element).addClass('success');
              stationNr2=row.stationNr; 
              arr.push(stationNr2);//添加数值到数组
              //定义查询方法
               Array.prototype.indexOf = function(val) {
                  for (var i = 0; i < this.length; i++) {
                    if (this[i] == val) return i;
                  }
                  return -1;
                };
                Array.prototype.remove = function(val) {
                  var index = this.indexOf(val);
                  if (index > -1) {
                    this.splice(index, 1);
                  }
                };
               //去除重复元素
                var s = arr.join(",")+","; 
               for(var i=0;i<arr.length;i++) { 
               if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) { 
                arr.remove(arr[i]);
                document.getElementById("ddd").value=arr; 
                break; 
               } 
               }   
              document.getElementById("ddd").value=arr; 
           }
         });
       };
      //得到查询的参数
      oTableInit.queryParams = function (params) {
        var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,action也需要改成一样的
          limit: params.limit, //页面大小
          offset: params.offset, //页码
          order: params.order,
          ordername: params.sort,//返回排序列名
          //pageSize: params.pageSize,   //页面大小
          //pageNumber: params.pageNumber,  //页码  
          departmentname: $("#departmentname").val(),//返回查询条件
          wells: $("#wells").val(),
        };
        return temp;
      };
      return oTableInit;
    };
    var ButtonInit = function () {
      var oInit = new Object();
      var postdata = {};
      oInit.Init = function () {
        //初始化页面上面的按钮事件
      };
      return oInit;
    };

以上所述是小编给大家介绍的bootstrap table分页模板和获取表中的ID,对Get请求无效的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
原生js实现轮播图
Feb 27 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
React实现点击删除列表中对应项
Jan 10 #Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 #Javascript
微信小程序 slider 详解及实例代码
Jan 10 #Javascript
微信小程序 switch组件详解及简单实例
Jan 10 #Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 #Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 #Javascript
You might like
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JS功能代码集锦
2016/05/04 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
分析JS中this引发的bug
2017/12/12 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python dlib人脸识别代码实例
2019/04/04 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
今冬明春火灾防控工作方案
2014/05/29 职场文书
年终工作总结范文
2019/06/20 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
详解Python中*args和**kwargs的使用
2022/04/07 Python