zoukankan      html  css  js  c++  java
  • 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);
            }
         }

        

  • 相关阅读:
    hdu 4710 Balls Rearrangement()
    hdu 4707 Pet(DFS水过)
    hdu 4706 Children's Day(模拟)
    hdu 4712 Hamming Distance(随机函数暴力)
    csu 1305 Substring (后缀数组)
    csu 1306 Manor(优先队列)
    csu 1312 榜单(模拟题)
    csu 1303 Decimal (数论题)
    网络爬虫
    Python处理微信利器——itchat
  • 原文地址:https://www.cnblogs.com/zhangjd/p/7884603.html
Copyright © 2011-2022 走看看