Bootstrap Table quickly builds a backend management system

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 in detail how to quickly and perfectly build a backend management system using Bootstrap Table. It has certain reference value. Interested friends can refer to Bootstrap Tutorial, I hope it can help. to everyone.

Make corresponding customized configurations for different cities, and also perform some display and operations on some background data, so each module will basically have a table display form. The advantage of this is that it is intuitive and convenient. 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第一行会有+号，点击会出现更详细的该行信息
  detailFormatter: 'detailFormatter', //格式化详细页面模式的视图。
  pagination: true, //展示有分页
  paginationLoop: false, //循环分页
  sidePagination: 'server', //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法
  silentSort: false, //设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效19   escape: true, //转义HTML字符串，替换 &, <, >, ", `, 和 &#39; 字符.
  searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
  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;举报状态&#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 Quick template construction

javascript - some issues in the development of the backend management system

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