BootStrap Editable Tables Table _jquery

First, display data (basic function)

In the HTML page, define the table and the column name of the table, and finally the data from the database query, loop to the page. This system is used in the PHP language, which is used in the PHP syntax, if it is the Java language, PHP to replace the corresponding syntax in the JSP line

<div class= "Containe" > <table class= "table table-striped table-bordered table-hover" > <thead> <tr class= "Success" > <th> serial number </th> <th style= "Display:none" >ActionID</th> <th>category& lt;/th> <th>subprocess name</th> <th>Description</th> <th>do action</th> < 
/tr> </thead> <tbody> <?php//Traversal pass over the variable $subprocess_info $i = 1; foreach ($subprocess _info as $_v) {?> <tr id= "" > <td><?php echo $i;?></td> <td style= "di Splay: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;?> "> Modify </a> <a href="./index.php?r=subprocess/del&id=<?php echo $_v->actionid;?> "> Delete </a> </td> </tr> <?php $i + +;  }?> </tbody> </table> </div>

Second, table editing (Advanced function)

In the HTML page, first define a table and then initialize it in JS. This feature refers to a Third-party plug-in, you can download http://bootstrap-table.wenzhixin.net.cn/zh-cn/here, this plugin is modified http:// bootstrap-table.wenzhixin.net.cn/zh-cn/inside some of the functions formed after. In the use of the process, I made a number of small changes, we can use when the situation to

1. Effect display

After the table is initialized

Add New Line

2. In use, first need to introduce its JS, I am a unified reference to the entry file

<!--form Editor--> 
<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> 

To define a table in a page, you can add a custom button

<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> 

3. JS Initialization table

$ (function () {///Initialize Table $ (' #subprocessTable '). Bootstraptable ({method: ' Get ', url: "./index.php?r=subprocess/ 
Subprocessinfo ", editable:true,//open edit mode clicktoselect:true, Cache:false, showtoggle:true,//Show toggle button to toggle table/Card view. Showpaginationswitch:true,//Display paging toggle button pagination:true, pagelist: [10,25,50,100], Pagesize:10, pagenumber:1, uniqueId  
: ' index ',////Set index column to unique 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.in Dex=index; Return line number}, {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 t o the page var data = {actionid: ', ActionName: ', Category: ', Description: '}; Define a new row data,certainly it ' s empty $ (' #subprocessTable '). Bootstraptable (' prepend ', data); 

The method is 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 (); 
});  });

You need to use a drop-down list, when defining a column.

{field: "Torun", Title: "Run Flag", Align: "center", edit:{ 
Type: ' SELECT ',//dropdown box 
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); 
} 

The effect is as follows

Other operations, you can go to this plugin's website to consult the document, or see JS source code

Third, dynamic table header

Dynamic header, in the final analysis is the column data is not fixed each time, according to the premise of the query database, and then load the table based on the query results. With the above modification, to achieve this function has been easy, as long as the initialization of the table to replace the columns of our customized data can be, made a simple demo, concrete can see "Easyui DataGrid" dynamic loading column this article

$ (function () { 
var columnsall = new Array ();//define a collection of columns to hold the returned data 
//encapsulate the column data in an object 
var col = {}; 
col["Field" = "index"; 
col["title"] = "ID"; 
col["align"] = ' center '; 
col["formatter"] = function (value, row, index) { 
return row.index=index;//Returns the line number 
}; 
col["Edit" = false; 
Columnsall.push (COL); Add this object to the column set 
var col2 = {}; 
col2["Field" = "scenarioid"; 
col2["title"] = "haha"; 
col2["align"] = ' center '; 
col2["Edit" = false; 
Columnsall.push (col2); Add this object to the column collection 
//Table Data 
$ (' #detailTable '). Bootstraptable ({method 
: ' Get ', 
URL: "./index.php?r= Session/sessioninfo ", 
editable:true,//open edit mode 
clicktoselect:true, 
cache:false, 
uniqueId: ' Index ',//Set index column to unique index 
striped:true, 
minimumcountcolumns:2, 
smartdisplay:true, 
columns: [ 
Columnsall 
] 
}); 

The effect is as follows:

The above is a small set to introduce the bootstrap can edit table, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!