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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值