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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
简单了解常用的JavaScript 库
Jul 16 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
mysql 搜索之简单应用
2007/04/27 PHP
生成卡号php代码
2008/04/09 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
详解Python中for循环是如何工作的
2017/06/30 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
集团公司人力资源部岗位职责
2014/01/03 职场文书
小区门卫管理制度
2014/01/29 职场文书
马智宇结婚主持词
2014/04/01 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
小学校长开学致辞
2015/07/29 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
Python pandas之求和运算和非空值个数统计
2021/08/07 Python