BootStrap 可编辑表Table格


Posted in Javascript onNovember 24, 2016

一、 显示数据(基础功能)

在html页面中定义表格以及表格的列名,最后把从数据库中查询出来的数据,循环显示到页面中。这个系统用的是PHP语言,里边用到了PHP中的语法,如果是Java语言,把php换成jsp中对应的语法就行

<div class="containe"> 
<table class="table table-striped table-bordered table-hover"> 
<thead> 
<tr class="success"> 
<th>序号</th> 
<th style="display: none">ActionID</th> 
<th>Category</th> 
<th>SubProcess Name</th> 
<th>Description</th> 
<th>Do Action</th> 
</tr> 
</thead> 
<tbody> 
<?php 
//遍历传递过来的变量$subprocess_info 
$i=1; 
foreach($subprocess_info as $_v){ 
?> 
<tr id=""> 
<td><?php echo $i; ?></td> 
<td style="display: none"><?php echo $_v->ActionID; ?></td> 
<td><?php echo $_v->Category; ?></td> 
<td><a href="#"><?php echo $_v->ActionName; ?></a></td> 
<td><?php echo $_v -> Description; ?></td> 
<td> 
<a href="./index.php?r=subprocess/update&id=<?php echo $_v->ActionID; ?>">修改</a> 
<a href="./index.php?r=subprocess/del&id=<?php echo $_v->ActionID; ?>">删除</a> 
</td> 
</tr> 
<?php $i++; }?> 
</tbody> 
</table> 
</div>

二、表格编辑(高级功能)

在html页面中,先定义一个表格,然后到js中初始化。这个功能引用了一个第三方插件,可以到这里下载 http://bootstrap-table.wenzhixin.net.cn/zh-cn/,这个插件是修改了 http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 里边的一些功能后形成的。在使用过程中,我做了一些小的改动,大家用的时候可以根据情况来

1. 效果展示

表格初始化后

BootStrap 可编辑表Table格

添加新行

BootStrap 可编辑表Table格

2. 在使用时,首先需要引入它的js,我是统一引用到入口文件中的

<!--表格编辑--> 
<link href="./assets/tableEdit/css/bootstrap-table.min.css" rel="stylesheet" /> 
<script src="./assets/tableEdit/js/bootstrap-table.js"></script> 
<script src="./assets/tableEdit/js/bootstrap-table-edit.js"></script> 
<script src="./assets/tableEdit/js/bootstrap-select.js"></script> 
<script src="./assets/tableEdit/js/bootstrap-datetimepicker.min.js"></script> 
<link href="./assets/tableEdit/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

在页面中定义表格,可添加自定义按钮

<script src="./js/subprocess/subprocess.js"></script> 
<div class="col-md-12"> 
<div style="float:right;margin:10px 0px 10px 5px"> 
<a title="Add" href="./index.php?r=subprocess/add"> 
<button type="button" class="btn btn-default" id="addData"<span style="color:#008000;background-color:#efefef;font-weight:bold;"></span>> 
<span class="glyphicon glyphicon-plus"></span> 
</button> 
</a> 
</div> 
<table class="table table-striped table-bordered table-hover" id="subprocessTable"></table> 
</div>

3. js初始化表格

$(function(){ 
//初始化表格 
$('#subprocessTable').bootstrapTable({ 
method: 'get', 
url:"./index.php?r=subprocess/subprocessInfo", 
editable:true,//开启编辑模式 
clickToSelect: true, 
cache: false, 
showToggle:true, //显示切换按钮来切换表/卡片视图。 
showPaginationSwitch:true, //显示分页切换按钮 
pagination: true, 
pageList: [10,25,50,100], 
pageSize:10, 
pageNumber:1, 
uniqueId: 'index', //将index列设为唯一索引 
striped: true, 
search: true, 
showRefresh: true, 
minimumCountColumns: 2, 
smartDisplay:true, 
columns: [ 
[ 
{field:"index",title:"ID",align:"center",edit:false,formatter:function(value, row, index){ 
return row.index=index ; //返回行号 
}}, 
{field:"actionName",title:"ActionName",align:"center",order:"asc",sortable:"true",formatter:function(value,row,index){ 
var strHtml ='<a href="./index.php?r=subprocess/modify&id='+ row.actionId +'">'+ row.actionName +'</a>'; 
return strHtml; 
}}, 
{field:"category",title:"Category",align:"center",sortable:"true"}, 
{field:"description",title:"Description",align:"center"}, 
{field:"action",title:"Action",align:"center",formatter:function(value,row,index){ 
var strHtml ='<a href="./index.php?r=subprocess/modify&id='+ row.actionId +'"><li class="glyphicon glyphicon-pencil"></li></a>'+ 
'<a href="javascript:void(0);" onclick="removeData('+ index +')" style="margin-left:5px;"><li class="glyphicon glyphicon-remove"></li></a>'; 
return strHtml; 
},edit:false}, 
{field:"actionId",title:"ActionID",align:"center",edit:false,visible:false,searchable:false} 
] 
] 
}); 

/** 
* add a new row 
*/ 
$('#addData').click(function(){ 
$('#subprocessTable').bootstrapTable('selectPage', 1); //Jump to the first page 
var data = {actionId: '', actionName: '',category:'', description: ''}; //define a new row data,certainly it's empty 

$('#subprocessTable').bootstrapTable('prepend', data); //the method of prepend must defined all fields,but append needn't 
//$('#dataTable').bootstrapTable('append',data); 

$("#dataTable tr:eq(1) td:eq(0)").trigger("dblclick"); 
$("#dataTable input")[0].focus(); 
}); 
});

需要用下拉列表的,在定义列的时候这样定义

{field:"toRun",title:"Run Flag",align:"center",edit:{ 
type:'select',//下拉框 
url:'./index.php?r=dictionary/dictionaryInfo&type='+"run", 
//data:[{id:1,text:'hello'},{id:2,text:'hi'}], 
valueField:'id', 
textField:'text', 
editable : false, 
onSelect:function(val,rec){ 
//console.log(val,rec); 
} 
},sortable:true}

效果如下

BootStrap 可编辑表Table格

其它的操作,大家可以到这个插件的网站上查阅文档,或者看js源码

三、动态表头

动态表头,说到底就是每次的列数据是不固定的,根据前提条件查询数据库,再根据查询结果加载表头。有了上边的修改,实现这个功能已经不在话下,只要把初始化表格的columns替换成我们自定义的数据就可以了,做了个简单的小demo,具体的可以看【EasyUi DataGrid】动态加载列这篇文章

$(function(){ 
var columnsAll = new Array(); //定义一个新的列集合,用来保存返回的数据 
//把列数据封装到一个对象中 
var col = {}; 
col["field"] = "index"; 
col["title"] = "ID"; 
col["align"] = 'center'; 
col["formatter"] = function(value, row, index){ 
return row.index=index ; //返回行号 
}; 
col["edit"] = false; 
columnsAll.push(col); //把这个对象添加到列集合中 
var col2 = {}; 
col2["field"] = "scenarioId"; 
col2["title"] = "haha"; 
col2["align"] = 'center'; 
col2["edit"] = false; 
columnsAll.push(col2); //把这个对象添加到列集合中 
//表格数据 
$('#detailTable').bootstrapTable({ 
method: 'get', 
url:"./index.php?r=session/sessionInfo", 
editable:true,//开启编辑模式 
clickToSelect: true, 
cache: false, 
uniqueId: 'index', //将index列设为唯一索引 
striped: true, 
minimumCountColumns: 2, 
smartDisplay:true, 
columns: [ 
columnsAll 
] 
}); 
});

效果如下:

BootStrap 可编辑表Table格

以上所述是小编给大家介绍的BootStrap 可编辑表Table格,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
js对象基础实例分析
Jan 13 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 #Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 #Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 #Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 #Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 #Javascript
JS 终止执行的实现方法
Nov 24 #Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 #Javascript
You might like
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Python os模块介绍
2014/11/30 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
解析Python编程中的包结构
2015/10/25 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
舞蹈毕业生的自我评价
2014/03/05 职场文书
施工工地安全标语
2014/06/07 职场文书
垃圾桶标语
2014/06/24 职场文书
就业协议书怎么填
2014/09/15 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
高中班长竞选稿
2015/11/20 职场文书
中学语文教学反思
2016/02/16 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
浅谈Python数学建模之线性规划
2021/06/23 Python
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
css3 选择器
2022/05/11 HTML / CSS