Bootstrap Table is a jQuery table plug-in based on Bootstrap. With simple settings, you can have powerful functions such as single selection, multi-selection, sorting, paging, editing, exporting, filtering (expansion), etc. This article mainly introduces to you how to quickly and perfectly build a backend management system with Bootstrap Table. It has certain reference value. Interested friends can refer to it. I hope it can help you.

The app management and backend configuration system we are building now requires customized configurations for different cities, and some display and operation of some backend data, so each module basically knows how to do it. The advantage of having a table presentation is that it is intuitive and easy to operate. As for what table plug-in to use, it is undoubtedly bootstrap table. It has powerful functions and complete documentation, and our project is also based on bootstrap layout, so we chose it. Next, I will post some project code to show it (for reference only). Take notes.

First of all, bootstrap's Tab is used to switch different tables for display. The switching menu code is as follows:

 <p class="report-count">被舉報次數：${count}次</p>
  <ul class="report-btn nav nav-tabs" id="myTab" >
    <li class="pending active"><a href="#padding" onclick="freashTable(0)" data-toggle="tab">待處理：${stateCountList[0]}次</a><i class=""></i></li>
    <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">舉報成立：${stateCountList[1]}次</a></li>
    <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">舉報不成立：${stateCountList[2]}次</a></li>
  </ul>

I believe you are no stranger to bootstrap. Add {data-toggle="tab"} to each tag that needs to be switched, and add an anchor point to match the sub-content of the corresponding switch {anchor point: href="#padding" rel="external nofollow"} , the corresponding word content code for switching is as follows:

<p class="table-view tab-content">
      <p class=" tab-pane fade in active" id="padding">
       <p class="table-header clear">
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="success-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="fail-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
     </p>

By setting the id {#padding} corresponding to the above anchor point for each sub-content element that needs to be switched, and don't forget Add (tab-content) to the outer container and add class (tab-pane fade in active) to the sub-element container. Those with active are selected by default. Each sub-content has a table element, so here is the table we need. Switching each tab will refresh and display the corresponding table data. Here we load data by dynamically generating tables.

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //請求數據地址url
  height: getHeight(), //獲取行高
  striped: true, //設置為 true 會有隔行變色效果
  search: true, //為true會有搜索框
  showRefresh: true, //為true有刷新按鈕
  showColumns: true, //是否顯示 內容列下拉框
  minimumCountColumns: 2,//當列數小于此值時，將隱藏內容列下拉框
  clickToSelect: true, //點擊行是checkbox或者rediobox選中
  detailView: true, //設置為 true 可以顯示詳細頁面模式。table第一行會有+號，點擊會出現(xiàn)更詳細的該行信息
  detailFormatter: 'detailFormatter', //格式化詳細頁面模式的視圖。
  pagination: true, //展示有分頁
  paginationLoop: false, //循環(huán)分頁
  sidePagination: 'server', //設置在哪里進行分頁，可選值為 'client' 或者 'server'。設置 'server'時，必須設置 服務器數據地址（url）或者重寫ajax方法
  silentSort: false, //設置為 false 將在點擊分頁按鈕時，自動記住排序項。僅在 sidePagination設置為 server時生效19   escape: true, //轉義HTML字符串，替換 &, <, >, ", `, 和 &#39; 字符.
  searchOnEnterKey: true, //設置為 true時，按回車觸發(fā)搜索方法，否則自動觸發(fā)搜索方法
  idField: &#39;systemId&#39;, //指定主鍵
  maintainSelected: true, //設置為 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
  toolbar: &#39;#toolbar&#39;, //一個jQuery 選擇器，指明自定義的toolbar 
  columns: [
    {field: &#39;complain_reason&#39;, title: &#39;舉報類型&#39;,align: &#39;center&#39;},
    {field: &#39;nick_name&#39;, title: &#39;舉報人&#39;,align: &#39;center&#39;},
    {field: &#39;create_time&#39;, title: &#39;舉報時間&#39;,formatter:&#39;timeFormat&#39; },
    {field: &#39;complain_state&#39;, title: &#39;舉報狀態(tài)&#39;,formatter:&#39;stateFormat&#39;}
    {field: &#39;action&#39;, title: &#39;操作&#39;, align: &#39;center&#39;, formatter: &#39;actionFormatter&#39;, events: &#39;actionEvents&#39;, clickToSelect: false}
   ]
  });
}

The above is the function to initialize the table. The index is passed to request different addresses to refresh different tables when switching, because there is an onclick event function in each tab switching menu. FreshTable (index), I have commented all the configurations used in the table in the above code. If you want to see the detailed configuration, please see the official website configuration (http://bootstrap-table.wenzhixin.net.cn/zh-cn /documentation/). Columns configure each row, field is the field key value to be displayed in each column, title corresponds to the header of each column, formatter is a custom function to format each column, only the time formatting function code is shown below:

function timeFormat(value,row,index){
  value = row.modifyTime==null?value:row.modifyTime;
 return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
 }

The line whose corresponding field is action is the operation button. The formatted operation button code is as follows:

function actionFormatter(value, row, index) {
 return [
  &#39;<a class="update" href="javascript:;" onclick="editdateAction(\&#39;&#39; + row.systemId + &#39;\&#39;)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　&#39;,
  &#39;<a class="delete" href="javascript:;" onclick="deleteRowAction(\&#39;&#39;+row.systemId+&#39;\&#39;)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>&#39;
 ].join(&#39;&#39;);
}

At the same time, paging bootstrap has provided complete configuration (including the number of rows displayed on each page, paging buttons, total number of items, total number of pages, etc.) but it does not jump to the specified row, so we need to write its own style and position it accordingly. paging bar, but it has related methods provided.

selectPage is to jump to the specified page. We can add a method by ourselves:

function goPage(){
  var page=$('#pageNum').val();
  $table.bootstrapTable('selectPage',page)
 }

is in use When using this method, use $table.bootstrapTable('selectPage',page).

Related recommendations:

Using React Family Bucket to build a backend management system example detailed explanation

Backend management system based on thinkphp Quickly build templates

Bootstrap Table quickly build backend management system

The above is the detailed content of Bootstrap Table builds backend management system code sharing. For more information, please follow other related articles on the PHP Chinese website!