Bootstrap可编辑表格

转载 2016年05月31日 16:02:30

1.说明

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

<strong>Bootstrap</strong>可编辑表格

这是居于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>可编辑表格

<strong>Bootstrap</strong>可编辑表格

以上就介绍了Bootstrap可编辑表格,包括了require,Bootstrap,行号方面的内容,希望对Javascript教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_193357_3.html


相关文章推荐

Bootstrap编辑表格插件

  • 2015-10-16 20:10
  • 362KB
  • 下载

Bootstrap可编辑表格

1.说明 继续送福利了,居于Bootstrap可编辑表格,编辑框支持下拉和日期,先上图看下效果,如图1: 这是居于bootstrap-table进行扩展的功能,bootstrap-table的使用...

基于Bootstrap使用jQuery实现简单可编辑表格

editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列;(这里...
  • hj7jay
  • hj7jay
  • 2016-04-20 09:29
  • 1339

可编辑表格

编辑表格示例

  • 2015-10-17 13:25
  • 51KB
  • 下载

界面框架—可编辑表格

360UI 界面框架即QUI增添了可编辑的表格组件,包括文本框、下拉框,日期,下拉树控件,多选树控件等常用组件,希望和大家一起讨论,涉及代码较多,       感兴趣的具体可查看 。   ...

Ext 可编辑表格

  • 2008-05-09 22:05
  • 720KB
  • 下载

jquery实现编辑表格

js//需要首先通过Javascript来解决内容部分奇偶行的背景色不同//$(document).ready(function(){// //});//简化的ready写法$(function(){...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)