bootstrap用什麼表格插件

青灯夜游
發布: 2021-11-11 14:07:29
原創
1886 人瀏覽過

bootstrap可用「Bootstrap-Table」表格外掛程式。 「Bootstrap-Table」是基於Bootstrap的jQuery表格插件,透過簡單的設置,就可以擁有強大的單選、多選、排序、分頁,以及編輯、匯出、過濾等等的功能。

bootstrap用什麼表格插件

本教學操作環境:Windows7系統、bootsrap3.3.7版、DELL G3電腦

bootstrap可用「Bootstrap-Table」表格外掛程式。

Bootstrap table 是一款基於Bootstrap 的jQuery 表格插件,功能比較完備,能夠實現資料非同步獲取,編輯,排序等一系列功能,最可貴的是,只需要一些簡單的配置就可以實現一個功能完備的線上表格。

官網網址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Github網址: https://github.com/wenzhixin/bootstrap -table

中文文件:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

#主要功能

  • #支援Bootstrap 3 和Bootstrap 2

  • 自適應介面

  • 固定表頭

  • 非常豐富的設定參數

  • 直接透過標籤使用

  • #顯示/隱藏列

  • 顯示/隱藏表頭

  • 透過AJAX 取得JSON 格式的資料

  • 支援排序

  • 格式化表格

  • 支援單選或多選

  • #強大的分頁功能

  • 支援卡片視圖

  • 支援多語言

  • #支援外掛

##優點

#學習成本較低,配置簡單,文件齊全

跟Bootstrap無縫銜接,整體風格一致,也便於二次開發

開發者活躍,Github定期維護

Bootstrap Table的引入

 關於Bootstrap Table的引入,一般來說還是兩種方法:

1、直接下載原始碼,加入到專案裡面來。

由於Bootstrap Table是Bootstrap的一個元件,所以它是依賴Bootstrap的,我們首先需要加入Bootstrap的參考。 Bootstrap的包直接在 http://v3.bootcss.com/ 裡面可以找到,版本已經出來4的預覽版,但還是建議使用比較穩定的Bootstrap3,目前最新的3.3.5。然後就是Bootstrap Table的套件了,由於它是開源的,我們直接進到它的原始碼https://github.com/wenzhixin/bootstrap-table裡面git下來就好了。然後把這兩個包分別加入到專案中。

2、使用我們神奇的Nuget

打開Nuget,搜尋這兩個套件

##我們直接安裝即可。

而Bootstrap Table的版本竟然是0.4,這也太坑爹了。所以部落客建議Bootstrap Table的套件就直接在原始碼裡面去下載吧。 Bootstrap Table最新的版本好像是1.9.0。

程式碼詳解 當然,元件引用進來了,使用就簡單了,只不過這裡面涉及很多細節需要我們處理,具體我們待會再說,先來看看使用方法。

1、在cshtml頁面引用相關元件,並定義好一個空的表格。

@{
    Layout = null;
}



    
    BootStrap Table使用
    @*1、Jquery组件引用*@
    

    @*2、bootstrap组件引用*@
    
    
    
    @*3、bootstrap table组件以及中文包的引用*@
    
    
    
    
    @*4、页面Js文件的引用*@
    

查询条件
登入後複製
引入需要的檔案之後,我們最重要的就是定義一個空的table,如上的  
 。當然Bootstrap table也提供了一個簡介的用法,直接在table標籤裡面定義類似「data-…」等相關屬性,就不用再js裡面註冊了,但博主覺得這種用法雖然簡單,但不太靈活,遇到這些子等子表等這些高階用法的時候就不太好處理了,所以咱們還是統一使用在js裡面初始化的方式來使用table組件。

2、Js初始化######
$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_departments').bootstrapTable({
            url: '/Home/GetDepartment',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber:1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部门名称'
            }, {
                field: 'ParentName',
                title: '上级部门'
            }, {
                field: 'Level',
                title: '部门级别'
            }, {
                field: 'Desc',
                title: '描述'
            }, ]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            departmentname: $("#txt_search_departmentname").val(),
            statu: $("#txt_search_statu").val()
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};
登入後複製
###表格的初始化也很簡單,定義相關的參數即可。 ######上面一些部落客覺得重要的參數都加了註釋,並且初始化Table必須的幾個參數部落客也用(*)做了標記,如果你的表格也有太多的頁面需求,直接用必須的參數就能解決。 ######同樣,在######columns參數裡面其實也有很多的參數需要設置,像是列的排序,對齊,寬度等等。這些部落客覺得比較簡單,不會涉及表格的功能,看看API就能搞定。 ###

3、在Controller里面对应的方法

public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu)
        {
            var lstRes = new List();
            for (var i = 0; i < 50; i++)
            {
                var oModel = new Department();
                oModel.ID = Guid.NewGuid().ToString();
                oModel.Name = "销售部" + i ;
                oModel.Level = i.ToString();
                oModel.Desc = "暂无描述信息";
                lstRes.Add(oModel);
            }

            var total = lstRes.Count;
            var rows = lstRes.Skip(offset).Take(limit).ToList();
            return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
        }
登入後複製

这里有一点需要注意:如果是服务端分页,返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反,如果是客户端分页,这里要返回一个集合对象到前端。

4、效果及说明

还是贴几张效果图出来:

推荐学习:《bootstrap使用教程

以上是bootstrap用什麼表格插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!