bootstrap可编辑表格完整代码

代码演示

需要用bootstrap的编辑表格,在网上找了个代码,这里展示一下,借花献佛,分享给大家。
示例页面
操作演示:
代码展示:
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <!--支持 浏览器内核 webkit、ie-comp IE兼容、ie-stand IE标准 -->
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <!--开启IE兼容模式  -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!--移动设备支持, width=device-width 自适应宽度,initial-scale=1.0 初始缩放比例为1:1,user-scalable 用户是否可以手动缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <script type="text/javascript" src="../plus/import.inc.js"></script>
    <script type="text/javascript">
    	$(function(){
			//下拉框1
			$('#order_status1').bootstrapSelect({
    			data:[{id:1,text:'lzx'},{id:2,text:'lsl'}],
				//url:'',
				downBorder:true,
    			multiple:true,//多选
    			onSelect:function(val,rec){

    			}
    		}); 
			//下拉框2
			$('#order_status2').bootstrapSelect({
    			onSelect:function(val,rec){
    				console.log($('#order_status2').bootstrapSelect('getTextForVal','lzx2'));//根据文本获取值
    			}
    		}); 
			
    		$('#reload_btn').click(function(){
    			$('#order_status1').bootstrapSelect('reload',{
    				params:{id:'lzx'}
    			});
    		});
			
			
    		$('#reportTable').bootstrapTable({
				method: 'get',
				editable:true,//开启编辑模式
				clickToSelect: true,
				pagination: true,  //是否分页
				showToggle:true, //显示切换按钮来切换列表/卡片视图
				showPaginationSwitch:true, //显示分页切换按钮  
				pageList: [10,25,50,100],  
				pageSize:10,  
				pageNumber:1, 
				uniqueId: 'index', //将index列设为唯一索引  
				striped: true,  
				search: true,  //显示检索框
				showRefresh: true,  //显示刷新按钮
				columns: [
					{field:"index",title:"ID",align:"center",edit:false,formatter:function(value, row, index){  
						return row.index=index ; //返回行号  
					}},  
					{field:"user_email",edit:false,title:"email",align:"center",sortable:true},
					{field:"user_company",edit:{
										type:'select',//下拉框
					        			//url:'user/getUser.htm',
										data:[{id:1,text:'lzx'},{id:2,text:'lsl'}],
					        			valueField:'id',
					        			textField:'text',
					        			onSelect:function(val,rec){
					        				console.log(val,rec);
					        			}
					},title:"company",align:"center",width:"200px",sortable:true},
					{field:"user_dates",edit:{
						type:'date',//日期
						required:true,
						click:function(){
							
						}
					},title:"date",align:"center",sortable:true},
					{field:"user_version",title:"version",align:"center",sortable:true},
					{field:"user_isv2",title:"isv2",align:"center",sortable:true},
					{field:"userstatus_usertype",title:"usertype",align:"center",sortable:true},
					{field:"userstatus_package_id",title:"package_id",align:"center",sortable:true},
					{field:"userstatus_end_time",title:"end_time",align:"center",formatter:function(value,row,rowIndex){
						var strHtml = '<a href="javascript:void(0);" onclick="removeRow('+rowIndex+')">删除</a>';
						return strHtml;
					},edit:false},
					{field:"user_lastlogintime",title:"lastlogintime",align:"center",valign:'middle',sortable:true}
				],
				data : [{"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"},{"user_email":"20140416@xxxxddffg.com","user_company":"3","user_dates":"2014-10-13 13:35:51","user_lastlogintime":"0","user_version":"1","user_isv2":"0","userstatus_usertype":"0","userstatus_package_id":"100001","userstatus_end_time":"NULL"},{"user_email":"20083matsumoto-hs@polus.co.jp","user_company":"1","user_dates":"2014-10-31 13:02:47","user_lastlogintime":"1414726074","user_version":"0","user_isv2":"1","userstatus_usertype":"0","userstatus_package_id":"100014","userstatus_end_time":"0"},{"user_email":"20.2.n0.5@gmail.com","user_company":"","user_dates":"2014-11-21 11:00:10","user_lastlogintime":"1416564204","user_version":"0","user_isv2":"0","userstatus_usertype":"0","userstatus_package_id":"100014","userstatus_end_time":"0"}]
			}); 
			
			$('.form_datetime').datetimepicker({
				weekStart: 1,
				todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				forceParse: 0,
				language:'zh-CN',
				format: 'yyyy-mm-dd hh:ii:ss',
				pickerPosition: 'bottom-left',
				showMeridian: 1
			});
    	});
		function removeRow(rowIndex){
			$('#reportTable').bootstrapTable('removeRow',rowIndex);
		}
    </script>
  </head>
  
  <body>
  	
    <ul id="myTab" class="nav nav-tabs">
	   <li>
	      <a href="#tab1" data-toggle="tab">下拉框</a>
	   </li>
	   <li class="active">
		  <a href="#tab2" data-toggle="tab">编辑表格</a>
	   </li>
	   <li>
	      <a href="#tab3" data-toggle="tab">日期控件</a>
	   </li>
	</ul>
	<div id="myTabContent" class="tab-content">
		<!--下拉框-->
	   <div class="tab-pane fade" id="tab1">
		   <div class="form-group">
			 下拉框1: <input name="status1" class="form-control" id="order_status1" style="width:190px;" value="2"/>
		   </div>
		   <div class="checkbox">
		   下拉框2:
			 <select name="status2" style="width:190px;" id="order_status2" class="form-control" value="1">
				<option value=1>lzx1</option>
				<option value=2>lzx2</option>
				<option value=3>lsl</option>
				<option value=4>hello</option>
				<option value=5>she</option>
			 </select>
		   </div>
		<button type="button" id="reload_btn" class="btn btn-default">重新加载下拉框1</button>
		
	   </div>
	   
	   <!--可编辑表格-->
	   <div class="tab-pane fade in active" id="tab2">
	   	  <button type="button" class="btn btn-default" id="addRowbtn">添加行</button>
	      <table class="table table-striped table-hover" id="reportTable"></table>
		  <!--<table class="table table-striped table-hover" id="reportTable1"></table>-->
	   </div>
	   
	   <!--日期控件-->
	   <div class="tab-pane fade " id="tab3">
	     	 
			 <div class="col-md-2">
				<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>
					<input type="hidden" id="dt_set_order_time_input" value="2015-10-16" name="set_order_time"/>
				 </div>
			</div>
	   </div>
	</div>
	
  </body>
</html>
 

代码分享

链接:https://pan.baidu.com/s/1Dll8RIgwV0v0AK3HifWZVA
提取码:6tcv
大T笔记所有文章均为本人原创,转载请您注明来源,并留下原文链接地址,是对我的尊重,也是对知识的尊重,谢谢!
大T笔记 » bootstrap可编辑表格完整代码

大T笔记-我的个人互联网创业和自由职业之路

关于我 我的百宝箱
大T笔记-专注个人互联网创业和自由职业