Bootstrap可编辑表格

1.说明

继续送福利了，居于Bootstrap可编辑表格，编辑框支持下拉和日期，先上图看下效果，如图1：

这是居于bootstrap-table进行扩展的功能，bootstrap-table的使用这边就不多说了，日期控件用的是bootstrap-datetimepicker，下拉控件bootstrap-select 这个是小编自己写的

bootstrap-table API地址：http://www.html580.com/11556/demo 

bootstrap-datetimepicker API地址：http://www.bootcss.com/p/bootstrap-datetimepicker/

bootstrap-select API地址：http://blog.csdn.net/lzxadsl/article/details/48859625

2.用法

如果有用过easyui或者extjs，就很容易上手了，其实感觉现在每套ui用法都差不多。

先上一段bootstrap-table用法代码

[html]  view plain  copy

1. $('#j-installment_table').bootstrapTable({  
2.         method:'get',  
3.         url: 'xxx.htm',  
4.         striped: true,  
5.         clickToSelect: true,  
6.         pagination: true,  
7.         pageSize: 10,  
8.         sidePagination:'server',  
9.         pageList: [10, 20, 50, 100, 200, 500],  
10.         queryParamsType: 'limit',   
11.         queryParams: function (params){  
12.             //获取查询条件  
13.             $('#j_serach').getSearchParams(params);  
14.             return params;  
15.         },  
16.         columns: [  
17.             {field:'',title:'复选框',width:50,checkbox:true},  
18.             {field:'order_type',title:'订单类型',align:'center'},  
19.             {field:'status',title:'状态',align:'center'},  
20.             {field:'CarTrunk',title:'车辆轨迹',align:'center',formatter:function(value,row,rowIndex){  
21.                 var strHtml = '<a href="order/order/edit.htm?id='+row.id+'">修改</a>';  
22.                 if(row.status == '新建'){  
23.                     strHtml += ' <a href="javascript:void(0);" onclick="javascript:void(0)">审核</a>';  
24.                 }  
25.                 return strHtml;  
26.             }}  
27.         ]  
28. });  

上面主要加了较多的分页信息，如果要让表格可编辑，那就设置editable:true，默认可编辑单元格是文本框，如果要使用下拉或者日期，那就在columns配置中的edit进行配置，设置edit:false，则该列不可编辑

2.1事件

下拉框跟日期事件的使用参见前面提供的api

文本框事件：

edit:{

click:function(e){},

blur:function(e){}

focun:function(e){}

}

2.2方法

这边的方法是我自己加上去的，至于bootstrapTable的那些方法的使用，同样参加上面的api

$('#reportTable').bootstrapTable('removeRow',rowIndex);  根据行号删除指定行，行号是从0开始的

$('#reportTable').bootstrapTable('getData');  获取表格全部数据，这个是表格原来就有的功能

$('#reportTable').bootstrapTable('getModiDatas'); //获取被修改过的行数据

$('#reportTable').bootstrapTable('getColTotal',2); //获取第三列的合，该列必须是数字

[html]  view plain  copy

1. $('#reportTable1').bootstrapTable({  
2.     method: 'get',  
3.     editable:true,//开启编辑模式  
4.     clickToSelect: true,  
5.     columns: [  
6.         {field:"user_email",edit:false,title:"email",align:"center"},  
7.         {field:"user_company",edit:{  
8.                     type:'select',//下拉框，如果是下拉则需要设置type为select  
9.                     //url:'user/getUser.htm',//从服务器加载  
10.                     data:[{id:1,text:'lzx'},{id:2,text:'lsl'}],  
11.                     valueField:'id',  
12.                     textField:'text',  
13.                     onSelect:function(val,rec){  
14.                         console.log(val,rec);  
15.                     }  
16.         },title:"company",align:"center",width:"200px"},  
17.         {field:"user_dates",edit:{  
18.             type:'date'//日期  
19.         },title:"date",align:"center"},  
20.         {field:"user_version",title:"version",align:"center",  
21.             edit:{  
22.                 required:true,  
23.                 click:function(){  
24.                 }  
25.             }  
26.         },  
27.         {field:"user_isv2",title:"isv2",align:"center"},  
28.         {field:"userstatus_usertype",title:"usertype",align:"center"},  
29.         {field:"userstatus_package_id",title:"package_id",align:"center"},  
30.         {field:"userstatus_end_time",title:"end_time",align:"center",formatter:function(value,row,rowIndex){  
31.             var strHtml = '<a href="javascript:void(0);" οnclick="removeRow('+rowIndex+')">删除</a>';  
32.             return strHtml;  
33.         },edit:false},  
34.         {field:"user_lastlogintime",title:"lastlogintime",align:"center",valign:'middle'}  
35.     ],  
36.     data : []  
37. });  

由于时间比较赶，这边就不多说了，下载地址： http://download.csdn.net/detail/lzxadsl/9194009

bootstrap-table、bootstrap-datetimepicker、bootstrap-select都包含在里面了，源码也在里面，还有demo。

建议先去看看bootstrap-table的API

日期控件使用例子：

[html]  view plain  copy

1. <div class="input-group date form_datetime col-sm-12" data-link-field="dt_set_order_time_input">  
2.     <input class="form-control"  id="dt_set_order_time" type="text" value="2015-10-16">  
3.     <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>  
4.     <input type="hidden" id="dt_set_order_time_input" value="2015-10-16" name="set_order_time"/>  
5.  </div>  

[javascript]  view plain  copy

1. $('.form_datetime').datetimepicker({  
2.         weekStart: 1,  
3.         todayBtn:  1,  
4.         autoclose: 1,  
5.         todayHighlight: 1,  
6.         startView: 2,  
7.         forceParse: 0,  
8.         language:'zh-CN',  
9.         format: 'yyyy-mm-dd hh:ii:ss',  
10.         pickerPosition: 'bottom-left',  
11.         showMeridian: 1  
12.      });  

这些配置属性如果不知道什么意思，上面提供的API中都有说明。