Perbincangan ringkas tentang penggunaan jadual ibu bapa-anak dan susunan baris dan lajur dalam jadual Bootstrap

Artikel ini menggabungkan penggunaan jadual induk-anak jadual Bootstrap dan susunan baris-lajur, dan kemudian memperkenalkan penggunaannya yang lebih maju sedikit. Ia mempunyai nilai rujukan tertentu Rakan-rakan yang memerlukan boleh merujuk kepadanya.

[Cadangan berkaitan: "tutorial bootstrap"]

1 🎜>Hari ini kita akan menukar sedikit kaedah Mari kita lihat kesan pelaksanaan dahulu, dan kemudian memperkenalkan pelaksanaan kod dan langkah berjaga-jaga kemudian. Ayuh, berikut adalah renderingnya:

1. Rendering meja ayah dan anak

2 Susunan semula baris

Sebelum menyusun semula

Seret susunan semula baris ke Baris pertama

3 Pesanan lajur

Sebelum memesan

<.>Seret pengepala lajur untuk mengisih

Selepas mengisih

2. Kod jadual ibu bapa-anak Penjelasan terperinci

Dalam bab terakhir, kami memperkenalkan penggunaan asas jadual Bootstrap Semasa memulakan jadual, terdapat atribut "detailView" dan anda akan melihat di hadapan setiap baris ikon berbentuk "+". Mengklik ikon ini mencetuskan peristiwa memuatkan subjadual. Ini adalah prinsip umum. Mari kita lihat kod ini sebenarnya sangat mudah.

1 Mulakan jadual dan daftarkan acara pengembangan baris

Mari kita lihat peristiwa pemuatan subjadual padaExpandRow fungsi kaedah yang sepadan (indeks, baris, $detail) Tiga parameter,

indeks: indeks baris baris semasa jadual induk.

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

baris: Objek data Json bagi baris semasa jadual induk.

$detail: objek td dalam baris baharu yang dibuat di bawah baris semasa.

Parameter ketiga amat penting kerana jadual subjadual yang dijana dimuatkan dalam objek $detail. Jadual bootstrap menjana objek $detail untuk kita, dan kemudian kita hanya perlu mengisinya dengan jadual yang kita inginkan.

2. Mari kita lihat kaedah oInit.InitSubTable()

Daripada ini kita dapat lihat bahawa prinsip menghasilkan subjadual adalah untuk mencipta objek jadual cur_table Kemudian daftarkan permulaan jadual objek ini. Bukankah sangat mudah~~

    //初始化子表格(无线循环)
    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 Penjelasan terperinci tentang kod jujukan baris

Kod jujukan baris adalah lebih ringkas, mari kita lihat.

1. Dua fail js tambahan perlu dirujuk

2. Apabila mentakrifkan jadual pada halaman cshtml, tambahkan dua atribut

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

Kemudian tidak perlu membuat sebarang pengubahsuaian apabila jadual js dimulakan Jadual yang dimuatkan boleh merealisasikan fungsi susunan baris.

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

4. Penjelasan terperinci tentang kod pesanan lajur

Serupa dengan pesanan baris. Penggunaan susunan lajur adalah seperti berikut:

1 Rujukan beberapa js dan css tambahan

2 halaman cshtml, tambahkan Atribut

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

tidak perlu diubah suai di tempat lain. Jadual yang dimuatkan boleh diisih mengikut lajur. Adakah ia sangat mudah?

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

5. Control filtering

Saya baru nak tamatkan artikel ni, tapi tiba-tiba saya teringat ada fungsi carian dalam bab sebelum ini fungsi tidak tersedia semasa paging di bahagian pelayan Saya tidak boleh menggunakannya, jadi saya teringat bahawa saya telah melakukan fungsi yang serupa dengan menapis setiap lajur dalam CS sebelum ini menapis setiap lajur jadual, jadi saya menyemak dokumen itu. Hasilnya menepati jangkaan, ia benar-benar berkesan~~ Mari kita lihat.

1. Paparan pemaparan

2. Contoh kod

(1) Perkenalkan js tambahan

(2) Tentukan atribut jadual dan atribut pengepala

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

Oleh kerana atribut pengepala jadual ditakrifkan di sini, tidak perlu mentakrifkan lajur apabila js dimulakan.

(3) permulaan 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>

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

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