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 28 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
微信小程序常用简易小函数总结
Feb 01 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
php5数字型字符串加解密代码
2008/04/24 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP中phar包的使用教程
2017/06/14 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python实现简单ftp客户端的方法
2015/06/28 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python实现读取json文件到excel表
2017/11/18 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
房屋出租委托书格式
2014/09/23 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
团结友爱主题班会
2015/08/13 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python