在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. 效果展示
表格初始化后
添加新行
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}
效果如下
其它的操作，大家可以到这个插件的网站上查阅文档，或者看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 ] }); });
效果如下：