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 面向对象编程
Oct 28 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
再谈javascript原型继承
Nov 10 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
vue配置多页面的实现方法
May 22 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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计算两个路径的相对路径
2013/06/14 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JavaScript面向对象编程
2008/03/02 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
教你学会使用Python正则表达式
2017/09/07 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python实现文件的备份流程详解
2019/06/18 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
用Python实现职工信息管理系统
2020/12/30 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
数据库连接池的工作原理
2012/09/26 面试题
小学毕业感言50字
2014/02/16 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
硕士学位申请报告
2015/05/15 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
销售人员管理制度
2015/08/06 职场文书
爱国教育主题班会
2015/08/14 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python