BootStrap的表格加載json數據，並且可以搜索，選擇

 

　　2018.4.11日更新，8號的時候我推薦去官網下載，但是那個版本不知道為什么我無法使用 $table.bootstrapTable('getSelections'); 無論如何。。。然后我嘗試着更換了NuGet里面的bootstrap-table,然后就可以了.....需要一題的是，Nuget里面有兩個bootstrap-table,只需要下載那個MVC的就可以了，第一個沒卵用.....

 

　　2018.4.8日更新，NuGet里面的bootstrap-table插件版本太低了，所以可以去官網下載，但是下載好的里面有兩個文件夾，一個是src,一個是dist,這兩個里面都有js,都有css,但是這里需要注意的是，只能引用src文件夾下面的才可以用!

 

 

　　2018.3.30日更新，我使用我的這篇博客在我的筆記本上想實現這個功能，但是完全沒有用，進不去bootstrapTable這個方法，而且完全不知道哪里錯了，然后在我的亂搞之下。。。成功了。。。

注意

<script src="~/Scripts/bootstrap-table.js"></script>    錯誤
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>    正確

這兩個js是完全不一樣的，上面那個沒有用的，只有下面的那個才有用。。。。原因是因為我在NuGet里面下載了兩個bootstrap-table,帶MVC的那個可以用，第一個不能用，所以引用也是錯誤的。

 

 

　　我會了EasyUI的方法，但是這個Bootstrap的一直不會，看了下某個項目里的實現方式，居然是讀出數據然后循環加<td>。。。。

我又在網上搜索其它的方法，毫無例外的提到了bootstrapTable這個方法，這個方法分為客戶端和服務器兩種方式，暫時我還不清楚兩種方式之間的區別，待研究。

第一步：引用

@*1、Jquery組件引用*@
<script src="~/Scripts/jquery-3.0.0.js"></script>
@*2、bootstrap組件引用*@
<script src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />

@*3、bootstrap table組件以及中文包的引用*@
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

Bootstrap的表格是需要一個插件的！！！ 去NuGet下！

第二步：寫js和html

@{
  
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="panel-body" style="padding-bottom:0px;">
    <div id="toolbar" class="btn-group">
        <button id="btn" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>選課
        </button>
    </div>
    <table id="table"></table>
</div>



<script>
    $(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 () {
            $('#table').bootstrapTable({
                url: '/SelectCourse/GetCourseTable',            //請求后台的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: [5, 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: [{
                    fileid: 'state', checkbox: true, formatter: function (value, row, index) {   //加復選框 //if (index === 2) {
                        //    return {
                        //        disabled: true,
                        //        checked: true
                        //    }
                        //}
                        console.info(value);
                        return value;
                    }
                }, {
                    field: '課程編號',
                    title: '課程編號',
                }, {
                    field: '課程名',
                    title: '課程名'
                }, {
                    field: '授課老師',
                    title: '授課老師'
                }, {
                    field: '上課地點',
                    title: '上課地點'
                }, {
                    field: '上課時間',
                    title: '上課時間'
                }, {
                    field: '課程介紹',
                    title: '課程介紹'
                }]
            });
        };
        oTableInit.queryParams = function (params) {
            var temp = {   //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
                //limit: params.limit,   //頁面大小
                //offset: params.offset,  //頁碼
                departmentname: $("#txt_search_Coursename").val(),
                statu: $("#txt_search_Teacher").val(),
                search: params.search       //加了這個，就可以使用自帶的搜索功能了
            };
            return temp;
        };
        return oTableInit;
    };

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

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

        return oInit;
    };

    $('#table').on('click-row.bs.table', function (e, row, $element) {
        $('.success').removeClass('success');
        $($element).addClass('success');
    });

    var $table = $('#table'),   //可寫可不寫
        $button = $('#btn');

    $button.click(function () {      //因為這個，你可以編輯表格了！ var result = $table.bootstrapTable('getSelections');
        alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
        var ids = [];
        for (var i = 0; i < result.length; i++) {

            var item = result[i];
            //ids.push(item.授課老師);
        }
        alert(ids);
    })


</script>

 

第三步：寫ActionResult

方法1.寫死json字符串，這個可以作為測試，實際項目都是從json文本或數據庫取得數據

    public ActionResult list()
        {
            string json = "{\"total\":2,\"rows\":[{\"id\":\"1\",\"name\":\"Vae\",\"time\":\"2017\",\"state\":\"0\"},{\"id\":\"2\",\"name\":\"蜀雲泉\",\"time\":\"2017\",\"state\":\"很好\"}]}";
            return Content(json);
        }

這里需要注意，要total和rows這兩個東東，而且這個貌似是服務器端特有的，客戶端沒有total，具體的東西要去GitHub上找官方示例，我暫且擱置。

 

方法2.從數據庫取數據

     public ActionResult GetCourseTable(string departmentname, string statu, string search)
        {
            if (search !="")
            {
                sql = $"select* from Course where 課程名 like '%{search}%' or 授課老師 like '%{search}%'";
            } 


            DataTable dt= sqlHelper.SqlConnectionInformation(sql);

            var rows = JsonConvert.SerializeObject(dt);
   
            string json = $"{{\"total\":{dt.Rows.Count},\"rows\":{rows}}}";

            return Content(json);
        }

參數那里，寫了search，就可以用自帶的功能了，你只需要寫個sql就行了，然后取數據存入DataTable,然后JsonConvert序列化成json格式的，完事。

 

 

效果圖：