通过AJAX获取ashx后台JSON数据并使用bootstrap-Table控件

最近项目的表格使用了bootstrap-Table控件,研究了一下直接上代码:
JS代码(这个只是客户端获取数据并不是服务端):
function initTable() {
    jQuery.ajax({
        url: "ashx/GuideManagement.ashx", 
        type: "post",
        dataType: "json",
        data: { Action: "GuideManagementCheck", AjaxFllage: true },
        success: function (value) {
            var obj = [];   
            for (var i = 0; i < value.length; i++) {
                obj.push(value[i]); //由于传回的JSON数据是被封装成了一个Object类型的数据传回,所以这里需要用一个数组类型接收

            }
            $table = $('#tb_departments').bootstrapTable({
                data: obj,   //最终的JSON数据放在这里

                height: $(window).height() - 100,

                striped: true,

                pagination: true,

                pageNumber: 1,

                pageSize: 10,

                pageList: [5, 10, 20],

                search: true,

                showRefresh: true,

                sidePagination: "client",

                showColumns: true,

                minimunCountColumns: 2,

                columns: [{

                    field: 'Name',   //列ID同时也是指定要显示的数据的ID

                    title: '姓名',

                    width: 100,

                    align: 'center',

                    valign: 'center',

                    sortable: true,

                }, {

                    field: 'IDNumber',

                    title: '身份证号码',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'GuideCardNumber',

                    title: '导游证编号',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'TourCompany',

                    title: '导游公司',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'Time',

                    title: '添加/修改时间',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'Status',

                    title: '是否有效',

                    align: 'center',

                    valign: 'center',

                    sortable: true

                }, {

                    field: 'TheRemarks',

                    title: '备注',

                    align: 'center',

                    width: 100,

                    valign: 'center',

                }, {

                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var e = '';
                        var d = '
			//这里是创建一个新的列但是列里面自定义了两个按钮用作业务上的操作。
                    }
                }]
            });
        }
    });
}
注意前台要有一个table作为容器,如:
	tb_departments">

你可能感兴趣的:(Web)