Bearbeitbare BootStrap-Tabelle

1. Daten anzeigen (Grundfunktion)

Definieren Sie die Tabellen- und Spaltennamen der Tabelle auf der HTML-Seite und zeigen Sie schließlich die von der Datenbank abgefragten Daten in einer Schleife an. Dieses System verwendet die PHP-Sprache, die die Syntax in PHP verwendet. Wenn es sich um eine Java-Sprache handelt, ersetzen Sie einfach PHP durch die entsprechende Syntax in 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>

2 . Tabellenbearbeitung (erweiterte Funktion)

Definieren Sie auf der HTML-Seite zunächst eine Tabelle und initialisieren Sie sie dann in js. Diese Funktion bezieht sich auf ein Plug-in eines Drittanbieters, das hier heruntergeladen werden kann: http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Dieses Plug-in hat http://bootstrap-table geändert. wenzhixin.net.cn /zh-cn/ Es wird nach einigen darin enthaltenen Funktionen gebildet. Während der Verwendung habe ich einige kleine Änderungen vorgenommen. Sie können sie je nach Situation verwenden

1 >

Eine neue Zeile hinzufügen

2. Wenn Sie es verwenden, müssen Sie es zuerst einheitlich in die Eintragsdatei einführen

Definieren Sie die Tabelle auf der Seite und fügen Sie benutzerdefinierte Schaltflächen hinzu

<!--表格编辑-->
<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" />

3 Die Initialisierungstabelle

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

muss eine Dropdown-Liste verwenden. Definieren Sie sie so, wenn Sie die Spalte definieren

$(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 =&#39;<a href="./index.php?r=subprocess/modify&id=&#39;+ row.actionId +&#39;">&#39;+ row.actionName +&#39;</a>&#39;;
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 =&#39;<a href="./index.php?r=subprocess/modify&id=&#39;+ row.actionId +&#39;"><li class="glyphicon glyphicon-pencil"></li></a>&#39;+
&#39;<a href="javascript:void(0);" onclick="removeData(&#39;+ index +&#39;)" style="margin-left:5px;"><li class="glyphicon glyphicon-remove"></li></a>&#39;;
return strHtml;
},edit:false},
{field:"actionId",title:"ActionID",align:"center",edit:false,visible:false,searchable:false}
]
]
});
 
/**
* add a new row
*/
$(&#39;#addData&#39;).click(function(){
$(&#39;#subprocessTable&#39;).bootstrapTable(&#39;selectPage&#39;, 1); //Jump to the first page
var data = {actionId: &#39;&#39;, actionName: &#39;&#39;,category:&#39;&#39;, description: &#39;&#39;}; //define a new row data，certainly it&#39;s empty
 
$(&#39;#subprocessTable&#39;).bootstrapTable(&#39;prepend&#39;, data); //the method of prepend must defined all fields，but append needn&#39;t
//$(&#39;#dataTable&#39;).bootstrapTable(&#39;append&#39;,data);
 
$("#dataTable tr:eq(1) td:eq(0)").trigger("dblclick");
$("#dataTable input")[0].focus();
});
});

Der Effekt ist wie folgt

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

Für andere Vorgänge können Sie die Dokumentation auf der Website dieses Plug-Ins überprüfen oder Schauen Sie sich den js-Quellcode an

3. Dynamischer Header

Dynamischer Header, letztendlich werden die Spaltendaten nicht jedes Mal entsprechend den Voraussetzungen abgefragt Anschließend wird der Header entsprechend den Abfrageergebnissen geladen. Mit den oben genannten Änderungen ist es kein Problem mehr, die Spalten der Initialisierungstabelle durch unsere benutzerdefinierten Daten zu ersetzen. Weitere Informationen finden Sie unter [EasyUi DataGrid] zum dynamischen Laden von Spalten. Dieser Artikel

hat folgende Wirkung:

$(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
]
});
});