1.说明
继续送福利了,居于Bootstrap可编辑表格,编辑框支持下拉和日期,先上图看下效果,如图1:
这是居于Bootstrap-table进行扩展的功能,Bootstrap-table的使用这边就不多说了,日期控件用的是Bootstrap-datetimepicker,下拉控件Bootstrap-select 这个是小编自己写的
Bootstrap-table API地址:http://www.html580.com/?Ou4SZy5J
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用法代码
$('#j-installment_table').<strong>Bootstrap</strong>Table({ method:'get', url: 'xxx.htm', striped: true, clickToSelect: true, pagination: true, pageSize: 10, sidePagination:'server', pageList: [10, 20, 50, 100, 200, 500], queryParamsType: 'limit', queryParams: function (params){ //获取查询条件 $('#j_serach').getSearchParams(params); return params; }, columns: [ {field:'',title:'复选框',width:50,checkbox:true}, {field:'order_type',title:'订单类型',align:'center'}, {field:'status',title:'状态',align:'center'}, {field:'CarTrunk',title:'车辆轨迹',align:'center',formatter:function(value,row,rowIndex){ var strHtml = '<a href="order/order/edit.htm?id='+row.id+'">修改</a>'; if(row.status == '新建'){ strHtml += ' <a href="javascript:void(0);" /a>'; } return strHtml; }} ] });上面主要加了较多的分页信息,如果要让表格可编辑,那就设置editable:true,默认可编辑单元格是文本框,如果要使用下拉或者日期,那就在 columns配置中的edit进行配置
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); //获取第三列的合,该列必须是数字
$('#reportTable1').<strong>Bootstrap</strong>Table({ <span style="white-space:pre"> </span>method: 'get', <span style="white-space:pre"> </span>editable:true,//开启编辑模式 <span style="white-space:pre"> </span>clickToSelect: true, <span style="white-space:pre"> </span>columns: [ <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>{field:"user_email",edit:false,title:"email",align:"center"}, <span style="white-space:pre"> </span>{field:"user_company",edit:{ <span style="white-space:pre"> </span>type:'select',//下拉框,如果是下拉则需要设置type为select <span style="white-space:pre"> </span>//url:'user/getUser.htm',//从服务器加载 <span style="white-space:pre"> </span>data:[{id:1,text:'lzx'},{id:2,text:'lsl'}], <span style="white-space:pre"> </span>valueField:'id', <span style="white-space:pre"> </span>textField:'text', <span style="white-space:pre"> </span>onSelect:function(val,rec){ <span style="white-space:pre"> </span>console.log(val,rec); <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>},title:"company",align:"center",width:"200px"}, <span style="white-space:pre"> </span>{field:"user_dates",edit:{ <span style="white-space:pre"> </span>type:'date'//日期 <span style="white-space:pre"> </span> <span style="white-space:pre"> </span>},title:"date",align:"center"}, <span style="white-space:pre"> </span>{field:"user_version",title:"version",align:"center",edit:{
<span style="white-space:pre"></span><pre name="code" class="html"><span style="white-space:pre"> </span><strong>require</strong>d:true, <span> </span>click:function(){ <span> </span> <span> </span>}
<span style="white-space:pre"> </span>}}, <span style="white-space:pre"> </span>{field:"user_isv2",title:"isv2",align:"center"}, <span style="white-space:pre"> </span>{field:"userstatus_usertype",title:"usertype",align:"center"}, <span style="white-space:pre"> </span>{field:"userstatus_package_id",title:"package_id",align:"center"}, <span style="white-space:pre"> </span>{field:"userstatus_end_time",title:"end_time",align:"center",formatter:function(value,row,rowIndex){ <span style="white-space:pre"> </span>var strHtml = '<a href="javascript:void(0);" /a>'; <span style="white-space:pre"> </span>return strHtml; <span style="white-space:pre"> </span>},edit:false}, <span style="white-space:pre"> </span>{field:"user_lastlogintime",title:"lastlogintime",align:"center",valign:'middle'} <span style="white-space:pre"> </span>], <span style="white-space:pre"> </span>data : [
<span style="white-space:pre"> </span>{"user_email":"20dai.rikon@gmail.com",
"user_company":"2",
"user_dates":"2014-10-13 13:35:51",
"user_lastlogintime":"0",
"user_version":"0",
"user_isv2":"0",
"userstatus_usertype":"0","userstatus_package_id":"100014","userstatus_end_time":"NULL"}
] });由于时间比较赶,这边就不多说了,下载地址:http://download.csdn.net/detail/lzxadsl/9187161
Bootstrap-table、Bootstrap-datetimepicker、Bootstrap-select都包含在里面了,源码也在里面,还有demo。
建议先去看看Bootstrap-table的API
日期控件使用例子:
<div class="input-group date form_datetime col-sm-12" data-link-field="dt_set_order_time_input"> <input class="form-control" id="dt_set_order_time" type="text" value="2015-10-16"> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dt_set_order_time_input" value="2015-10-16" name="set_order_time"/>
$('.form_datetime').datetimepicker({ weekStart: 1, todayBtn: 1, <span style="white-space:pre"> </span>autoclose: 1, <span style="white-space:pre"> </span>todayHighlight: 1, <span style="white-space:pre"> </span>startView: 2, <span style="white-space:pre"> </span>forceParse: 0, <span style="white-space:pre"> </span>language:'zh-CN', <span style="white-space:pre"> </span>format: 'yyyy-mm-dd hh:ii:ss', <span style="white-space:pre"> </span>pickerPosition: 'bottom-left', showMeridian: 1 });
这些配置属性如果不知道什么意思,上面提供的API中都有说明。
![<strong>Bootstrap</strong>可编辑表格](http://image.codes51.com/Article/image/20151016/20151016225310_6189.png)
以上就介绍了Bootstrap可编辑表格,包括了require,Bootstrap,行号方面的内容,希望对Javascript教程有兴趣的朋友有所帮助。
本文网址链接:http://www.codes51.com/article/detail_193357_3.html