bootstarp 之 简单表格$(function () { console.log(); //1.初始化Table var oTable = new TableInit(

 点击行事件触发需要jquery-toast.js 当然也需要bootstarp table 的js css


$(function () {

     console.log();
    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();


    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
   
});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {   
        $('#tb').bootstrapTable({
            url: 'executeController.do?sxrTable&type=09_01001-2',         //请求后台的URL(*)
            method: 'POST',                     //请求方式(*)
            contentType : "application/x-www-form-urlencoded",   //请求参数类型 这样在springmvc中接收的话要用request.getparameter()获取
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否可以搜索
            strictSearch: true,
            showColumns: false,                  //是否显示所有的列
            showRefresh: false,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 550,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
          //  uniqueId: "id",                     //每一行的唯一标识,一般为主键列
            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            onClickCell:function(field,value,row){ //点击
            new Toast({context:$('body'),message:'正在加载,请稍后……'}).show();
            var s=row.ZJHM;
            if(s==null){
              s='';
            }
            location.href='executeController.do?sxrInfo&xh='+row.XH+'&ajbs='+row.AJBS+'&sfz='+s+'&mc='+encodeURI(encodeURI(row.BZXRMC));
            },
       columns: [{
               field: 'XH',
               title: '案件编号',
               visible:false
           },{
               field: 'AH',
               title: '案号',
               width:270
           },{
               field: 'STLX',
               title: '诉调类型',
               formatter:function(value){
                if(value=='sq'){
                  return "诉前";
                }else if(value=='sz'){
                  return "诉中";
                }
               }
           },{
               field: 'STZZ',
               title: '调解组织',
               formatter:function(value){
                if(value=='RMTJ'){
                 return "人民调解";
                }else if(value=='HYTJ'){
             return "行业调解";
                }else if(value='QTLX'){
             return "其他类型";
                }else if(value='SFTJ'){
             return "司法调解";
                }else if(value='XZTJ'){
             return "行政调解";
                }else{
                return value;
                }
               }
           },{
               field: 'SALY',
               title: '诉案理由',
               formatter:function(value){
                var saly =['婚姻家庭纠纷',
                              '继承纠纷',
                              '相邻关系纠纷',
                              '标的较小的债务纠纷',
                              '人身损害赔偿纠纷',
                              '赡养、抚养、抚育纠纷',
                              '租赁纠纷',
                              '交通事故纠纷',
                              '刑事附带民事赔偿案件',
                              '医疗事故纠纷',
                              '其他适宜进行人民调解的纠纷',
                              '物业纠纷']
                   return saly[value-1];
               }
               
           },{
               field: 'STZT',
               title: '诉前状态',
               formatter:function(value){
                var stzt=['已立案',
                         '已排期',
                         '已审批',
                         '调解中',
                         '已归档']
                return stzt[value-1];


               }
           },{
               field: 'SFQR',
               title: '司法确认',
               formatter:function(value){
                if(value==1){
                  return "是";
                }else if(value==2){
                  return "否";
                }
               }
            },{
               field: 'SPZT',
               title: '审批状态',
               formatter:function(value){
                if(value==1){
                  return "通过";
                }else if(value==2){
                  return "不通过";
                }
               }
             },{
               field: 'TJJG',
               title: '调解结果',
               formatter:function(value){
                var tjjg=['人民调解结案',
                         '出具民事调解书',
                         '出具民事裁定书',
                         '联系不到当事人',
                         '不同意调解',
                         '当事人未到庭',
                         '调解不成']
                return tjjg[value-1];

               }
              },{
                   field: 'GDZT',
                   title: '归档状态',
                   formatter:function(value){
                    if(value!=null){
                    return "已归档";
                    }


                   }
             },{
                 field: 'SARQ',
                 title: '收案日期'
             },{
               field: 'JARQ',
               title: '结案日期'
             }]
        });
    };


    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
    limit: params.limit,   //页面大小
    offset: params.offset, //页码
    search:params.search//查询参数
        };
        return temp;
    };
    return oTableInit;
};




var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};


    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };


    return oInit;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code 1 2 3 4 给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签: Bootstrap Table 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机、平板、PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一、效果展示 二、BootStrap table简单介绍 bootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、table数据填充 bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#table').bootstrapTable({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL(*) method: 'post', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber:1, //初始化加载第一页,默认第一页 pageSize: 50, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识,一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; }; field字段必须与服务器端返回的字段对应才会显示出数据。 3、后台获取数据 a、servlet获取数据 [js] view plain copy BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ... b、springMvc Controller里面对应的方法获取数据 [js] view plain copy public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype) { ... } 4、分页(遇到问题最多的) 使用分页,server端返回的数据必须包括rows和total,代码如下: [js] view plain copy ...gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i<len;i++) { TradeBean tb = gblst.get(i); if(tb==null) { continue; } jo=new JSONObject(); jo.put("id", i+1); jo.put("liushuiid", tb.getLiushuiid()); jo.put("price", String.format("%1.2f",tb.getPrice()/100.0)); jo.put("mobilephone", tb.getMobilephone()); jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime())); jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]); jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败"); jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败"); jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0)); jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0)); jo.put("goodroadid", tb.getGoodroadid()); jo.put("SmsContent", tb.getSmsContent()); jo.put("orderid", tb.getOrderid()); jo.put("goodsName", tb.getGoodsName()); jo.put("inneridname", tb.getInneridname()); jo.put("xmlstr", tb.getXmlstr()); jsonData.add(jo); } int TotalCount=SqlADO.getTradeRowsCount(sql); JSONObject jsonObject=new JSONObject(); jsonObject.put("rows", jsonData);//JSONArray jsonObject.put("total",TotalCount);//总记录数 out.print(jsonObject.toString()); ... 5、分页界面内容介绍 前端获取分页数据,代码如下: [js] view plain copy ...oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };... 后端获取分页数据,代码如下: [js] view plain copy ...int pageindex=0; int offset = ToolBox.filterInt(json1.getString("offset")); int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit; } pageindex+= 1;//第几页... 以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。 转自:http://www.jb51.net/article/79033.htm
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值