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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
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的access操作类
2008/04/09 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Python实现的简单算术游戏实例
2015/05/26 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python开发的HTTP库requests详解
2017/08/29 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python多维数组分位数的求取方式
2020/03/03 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python新手学习使用库
2020/06/11 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
50道外企软件测试面试题
2014/08/18 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
银行门卫岗位职责
2013/12/29 职场文书
人事档案接收函
2014/01/12 职场文书
光盘行动倡议书
2014/02/02 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
市级三好生竞选稿
2015/11/21 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers