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文件的小脚本
Jun 28 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 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
提问的智慧(2)
2006/10/09 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
laravel请求参数校验方法
2019/10/10 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
详解Python中的多线程编程
2015/04/09 Python
Python最基本的输入输出详解
2015/04/25 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
社会实践感言
2014/01/25 职场文书
志愿者活动总结范文
2014/04/26 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2016年主题党日活动总结
2016/04/05 职场文书