집 > 기사 > 웹 프론트엔드 > Bootstrap Table은 백엔드 관리 시스템 코드 공유를 구축합니다.

Bootstrap Table은 백엔드 관리 시스템 코드 공유를 구축합니다.

小云云원래의: 2018-02-07 14:13:351754검색

Bootstrap Table은 Bootstrap 기반의 jQuery 테이블 플러그인으로, 간단한 설정으로 단일 선택, 다중 선택, 정렬, 페이징, 편집, 내보내기, 필터링(확장) 등의 강력한 기능을 사용할 수 있습니다. 이 글은 부트스트랩 테이블을 이용해 백엔드 관리 시스템을 빠르고 완벽하게 구축하는 방법을 주로 소개합니다. 관심 있는 친구들이 참고하면 좋을 것 같습니다.

현재 구축 중인 앱 관리 및 백엔드 구성 시스템은 도시별 맞춤 구성과 일부 백엔드 데이터의 일부 표시 및 작동이 필요하므로 각 모듈에는 기본적으로 테이블 표시가 있다는 장점이 있습니다. 그리고 운영하기 편리합니다. 어떤 테이블 플러그인을 사용할지는 의심할 여지 없이 부트스트랩 테이블입니다. 강력한 기능과 완전한 문서를 갖추고 있으며, 우리 프로젝트도 부트스트랩 레이아웃을 기반으로 하므로 이를 선택했습니다. 다음으로 이를 보여주기 위해 몇 가지 프로젝트 코드를 게시하겠습니다. (참고용으로만) 메모하세요.

우선, 부트스트랩의 탭은 표시할 다른 테이블을 전환하는 데 사용됩니다. 전환 메뉴 코드는 다음과 같습니다.

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

필요한 각 라벨에 ｛data-toggle=을 추가하세요. "tab"｝, 해당 전환된 하위 콘텐츠｛앵커 포인트와 일치하도록 앵커 포인트를 추가합니다: href="#padding" rel="external nofollow"｝, 해당 하위 콘텐츠 코드를 다음과 같이 전환합니다. :

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

전환해야 하는 각 하위 콘텐츠 요소에 대해 위 앵커 포인트에 해당하는 ID {#padding}을 설정하고 외부 컨테이너에 (tab-content)를 추가하는 것을 잊지 마세요. 하위 요소 컨테이너에 클래스(탭 창 페이드 인 활성화)를 추가하면 기본적으로 활성화된 클래스가 선택됩니다. 각 하위 콘텐츠에는 테이블 요소가 있으므로 여기에 필요한 테이블이 있습니다. 각 탭을 전환하면 해당 테이블 데이터가 새로 고쳐지고 표시됩니다. 여기서는 동적으로 테이블을 생성하여 데이터를 로드합니다.

var $table=$(&#39;.table&#39;)
function initTable(index){
  $table.bootstrapTable({
  url: &#39;${basePath}/interacts/complain/getComplainList?pkid=&#39;+$("#pkid").val()+&#39;&state=&#39;+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: &#39;detailFormatter&#39;, //格式化详细页面模式的视图。
  pagination: true, //展示有分页
  paginationLoop: false, //循环分页
  sidePagination: &#39;server&#39;, //设置在哪里进行分页，可选值为 &#39;client&#39; 或者 &#39;server&#39;。设置 &#39;server&#39;时，必须设置 服务器数据地址（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}
   ]
  });
}

위는 테이블을 초기화하는 함수로 각 탭 전환 메뉴에 onclick 이벤트 함수인refreshTable(index)이 있기 때문에 전환 시 다른 테이블을 새로 고치기 위해 다른 주소를 요청하기 위해 인덱스를 전달합니다. 모든 테이블 기능에 사용됩니다. 자세한 구성을 보려면 공식 웹사이트 구성(http://bootstrap-table.wenzhixin.net.cn/zh-cn/)을 참조하세요. 선적 서류 비치/). columns는 각 행을 구성하고, field는 각 열에 표시될 해당 필드 키 값이며, title은 각 열의 헤더에 해당하고, formatter는 각 열의 형식을 지정하는 사용자 정의 함수이며, 시간 형식 지정 함수 코드만 아래에 표시됩니다.

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

해당 필드가 액션인 줄은 액션 버튼입니다. 형식화된 액션 버튼 코드는 다음과 같습니다.

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;);
}

동시에 페이징 부트스트랩은 완전한 구성을 제공합니다(표시되는 행 수 포함). 각 페이지, 페이징 버튼, 총 항목 수, 총 페이지 수 등) 그러나 지정된 행으로 점프할 수 없으므로 해당 페이징 열을 찾으려면 자체 스타일을 작성해야 하지만 관련 메서드가 제공됩니다. ,

selectPage는 지정된 페이지로 이동하는 것입니다. 우리는 직접 메소드를 만들 수 있습니다:

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

해당 메소드를 사용할 때 $table.bootstrapTable('selectPage',page)를 사용하세요.

Bootstrap Table은 백엔드 관리 시스템 코드 공유를 구축합니다.

관련 기사