부트스트랩 테이블의 상위-하위 테이블 사용법과 행 및 열 순서에 대한 간략한 설명

이 글에서는 부트스트랩 테이블의 상위-하위 테이블 사용법과 행-열 순서를 결합한 후 조금 더 발전된 사용법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

[관련 권장사항: "부트스트랩 튜토리얼"]

1. 🎜>오늘은 방식을 살짝 바꿔서 먼저 구현 효과를 살펴보고 나중에 코드 구현과 주의사항을 소개하겠습니다. 자, 렌더링은 다음과 같습니다.

1. 아버지와 아들 테이블의 렌더링

2. 행 재정렬

재시퀀싱 전

드래그하여 행 재정렬 첫 번째 줄로

3. 열 순서

주문 전

열 헤더를 드래그하여 정렬

정렬 후

2. 상위-하위 테이블 코드 자세한 설명

이전 장에서 Bootstrap 테이블의 기본 사용법을 소개했습니다. 테이블을 초기화할 때 "detailView" 속성이 있는데, 앞에 가 표시됩니다. 각 행의 "+" 모양 아이콘입니다. 이 아이콘을 클릭하면 하위 테이블을 로드하는 이벤트가 트리거됩니다. 이것이 일반적인 원리입니다. 코드를 살펴보겠습니다. 실제로는 매우 간단합니다.

1. 테이블 초기화 및 행 확장 이벤트 등록

ExpandRow 해당 메소드 함수(index, row, $detail) 세 개의 매개변수

　　　 　　　　$("#tb_powerset").bootstrapTable({
                url: '/api/MenuApi/GetParentMenu',
                method: 'get',
                detailView: true,//父子表
                //sidePagination: "server",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    field: 'MENU_NAME',
                    title: '菜单名称'
                }, {
                    field: 'MENU_URL',
                    title: '菜单URL'
                }, {
                    field: 'PARENT_ID',
                    title: '父级菜单'
                }, {
                    field: 'MENU_LEVEL',
                    title: '菜单级别'
                }, ],                //注册加载子表的事件。注意下这里的三个参数！
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });

index: 상위 테이블의 현재 행에 대한 행 인덱스입니다.

row: 상위 테이블의 현재 행에 대한 Json 데이터 개체입니다.

$detail: 현재 행 아래에 생성된 새 행의 td 개체입니다.

생성된 하위 테이블 테이블이 $detail 개체에 로드되므로 세 번째 매개변수가 특히 중요합니다. 부트스트랩 테이블은 $detail 개체를 생성한 다음 원하는 테이블로 채우기만 하면 됩니다.

2. oInit.InitSubTable() 메소드를 살펴보겠습니다

이를 통해 하위 테이블을 생성하는 원리를 알 수 있습니다. 테이블 객체 cur_table 그런 다음 이 객체의 테이블 초기화를 등록합니다. 아주 간단하지 않나요~~

    //初始化子表格(无线循环)
    oInit.InitSubTable = function (index, row, $detail) {        var parentid = row.MENU_ID;        var cur_table = $detail.html(&#39;<table></table>&#39;).find(&#39;table&#39;);
        $(cur_table).bootstrapTable({
            url: &#39;/api/MenuApi/GetChildrenMenu&#39;,
            method: &#39;get&#39;,
            queryParams: { strParentID: parentid },
            ajaxOptions: { strParentID: parentid },
            clickToSelect: true,
            detailView: true,//父子表
            uniqueId: "MENU_ID",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: &#39;MENU_NAME&#39;,
                title: &#39;菜单名称&#39;
            }, {
                field: &#39;MENU_URL&#39;,
                title: &#39;菜单URL&#39;
            }, {
                field: &#39;PARENT_ID&#39;,
                title: &#39;父级菜单&#39;
            }, {
                field: &#39;MENU_LEVEL&#39;,
                title: &#39;菜单级别&#39;
            }, ],            //无线循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                oInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };

3. 행 시퀀스 코드에 대한 자세한 설명

행 시퀀스 코드는 더욱 간단합니다.

1. 두 개의 추가 js 파일을 참조해야 합니다

2. cshtml 페이지에서 테이블을 정의할 때 두 개의 속성을 추가합니다

<script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script>
<script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

그러면 js 테이블이 초기화될 때 수정할 필요가 없습니다. 로드된 테이블은 행 순서 지정 기능을 구현할 수 있습니다.

<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>

4. 열 정렬 코드에 대한 자세한 설명

행 정렬과 유사합니다. 컬럼 순서 사용법은 다음과 같습니다.

1. 몇 가지 추가 js 및 css를 참고

2. cshtml 페이지에서

<script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<link rel="stylesheet" href="../assets/examples.css">
<link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

속성을 ​​추가하면 다른 곳에서 수정할 필요가 없습니다. 로드된 테이블은 열별로 정렬할 수 있습니다. 매우 간단합니까?

<table id="tb_departments" data-reorderable-columns="true"></table>

5. 컨트롤 필터링

글을 마무리하려던 참인데 문득 이전 장에 검색 기능이 있었다는 게 생각나네요. 서버측에서 페이징시에는 기능을 사용할 수 없었기 때문에 예전에 CS에서 각 컬럼을 필터링하는 것과 비슷한 기능을 했던 기억이 나서 부트스트랩 테이블에도 이런 기능이 있는지 다시 궁금해졌습니다. 테이블의 각 열을 필터링하여 문서를 확인했습니다. 결과는 기대에 부응하네요, 정말 효과가 있어요~~ 한번 살펴보겠습니다.

1. 렌더링 표시

2. 코드 예시

(1) 추가 js 도입

(2) 테이블 속성 및 헤더 속성 정의

<script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>

여기서 테이블 헤더의 속성을 정의하기 때문에 js 초기화 시 컬럼을 정의할 필요가 없습니다.

 　　<table id="tb_roles" data-filter-control="true">
        <thead>
            <tr>
                <th data-field="ROLE_NAME" data-filter-control="select">角色名称</th>
                <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
                <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th>
            </tr>
        </thead>
    </table>

(3) js 초기화

 $('#tb_roles').bootstrapTable({
        url: '/Role/GetRole',
        method: 'get',
        toolbar: '#toolbar',
        striped: true,
        cache: false,
        striped: true,
        pagination: true,
        sortable: true,
        queryParams: function (param) {            return param;
        },
        queryParamsType: "limit",
        detailView: false,//父子表
        sidePagination: "server",
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        showColumns: true,
        showRefresh: true,
        minimumCountColumns: 2,
        clickToSelect: true,
        
    });

最开始，博主以为这种搜索只能用户客户端分页的情况，可是经过调试发现并非如此，原来搜索的条件都能通过json传递到服务端。我们来看调试的过程

后台接收参数，并反序列化

这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~

六、总结

以上就是bootstrap table的一些扩展应用。可能未不全面，还有一些高级用法也没有介绍，比如行、列合并，行列冻结等等。但博主相信只要有文档，使用起来应该问题不大。源码还需整理，待整理好再发上来。园友们暂且先看看！！

更多编程相关知识，请访问：编程入门！！