C# bootstrap之表格動態綁定值

      這段時間研究了下bootstrap，打算從表格開始學習，實現動態綁定值，在網上找了挺多例子，但是很少有寫全的，要不就太復雜，實現效果后總結一下，直接拷貝過去可以用。

      第一步：先去官網上下載bootstrap的文檔
      第二步：引入bootstrap之前，先需要引入jquery的文檔
      第三步：引入Bootstrap所需的js

     bootstrap 實現表格的動態綁定必須引入bootstrap-table的js插件，bootstrap本身是不具備這個功能的。

實現效果如圖：

 

 一、先去網上下載必要外部文件，下載之后引入當前項目。

    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
    <link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/bootstrap-table.js" type="text/javascript"></script>
    <script src="../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>

二、定義一個table控件

   <div class="container">
        <p>
            <button id="button" class="btn btn-default">
                Refresh from url</button></p>
        <table id="table" class="table table-bordered">
        </table>
    </div>

三、js加載表格內容。

 <script type="text/jscript">
        $(function () {
            $('#table').bootstrapTable({
                //請求方法
                method: 'get',
                //是否顯示行間隔色
                striped: true,
                //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）     
                cache: false,
                //是否顯示分頁（*）  
                pagination: true,
                //是否啟用排序  
                sortable: false,
                //排序方式 
                sortOrder: "asc",
                //初始化加載第一頁，默認第一頁
                //我設置了這一項，但是貌似沒起作用，而且我這默認是0,- -
                //pageNumber:1,   
                //每頁的記錄行數（*）   
                pageSize: 10,
                //可供選擇的每頁的行數（*）    
                pageList: [10, 25, 50, 100],
                //這個接口需要處理bootstrap table傳遞的固定參數,並返回特定格式的json數據  
                url: "Handler1.ashx?action=GetJson",
                //默認值為 'limit',傳給服務端的參數為：limit, offset, search, sort, order Else
                //queryParamsType:'',   
                ////查詢參數,每次調用是會帶上這個參數，可自定義                         
                //                queryParams: queryParams : function(params) {
                //                    var subcompany = $('#subcompany option:selected').val();
                //                    var name = $('#name').val();
                //                    return {
                //                          pageNumber: params.offset+1,
                //                          pageSize: params.limit,
                //                          companyId:subcompany,
                //                          name:name
                //                        };
                //                },
                //分頁方式：client客戶端分頁，server服務端分頁（*）
                sidePagination: "server",
                //是否顯示搜索
                search: false,
                //Enable the strict search.    
                strictSearch: true,
                //Indicate which field is an identity field.
                idField: "id",
                columns: [{
                    field: 'id',
                    title: 'ID',
                    align: 'center'
                }, {
                    field: 'name',
                    title: 'Item Name',
                    align: 'center'
                }, {
                    field: 'active',
                    title: 'Item Active',
                    align: 'center'
                }, {
                    field: 'user_id',
                    title: 'Item User_id',
                    align: 'center'
                }, {
                    field: 'no_of_reports',
                    title: 'Item no_of_reports',
                    align: 'center'
                }, {
                    field: 'id',
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        //通過formatter可以自定義列顯示的內容
                        //value：當前field的值，即id
                        //row：當前行的數據
                        var a = '<a href="#" >測試</a>';
                        return a;
                    }
                }],
                pagination: true
            });
        });  
    </script>

 四、后台生成json字符串（寫的測試數據，為了方便，直接寫的json串）

    public class Handler1 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string output = "";
            string action = context.Request["action"].ToString();
            switch (action)
            {
                case "GetJson":
                    output = "{\"total\":2,\"rows\":[{\"id\":\"1\",\"name\":\"name\",\"active\":\"active\",\"user_id\":\"user_id\",\"no_of_reports\":\"no_of_reports\"},{\"id\":\"2\",\"name\":\"name\",\"active\":\"active\",\"user_id\":\"user_id\",\"no_of_reports\":\"no_of_reports\"}]}";
                    break;
                default:
                    break;
            }

            context.Response.ContentType = "text/plain";
            context.Response.Write(output);
        }
     }