通过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 = '<button type="button" class="RoleOfD btn btn-default  btn-sm" style="margin-right:15px;" οnclick="layer_show(\'' + "修改信息" + '\',\'' + "Update_GuideManagement.html" + '\',\'' + "" + '\',\'' + "510" + '\',\'' + row.ID + '\')">编辑</button>';
                        var d = '<button type="button" class="RoleOfEdit btn btn-default  btn-sm"  style="margin-right:15px;" οnclick="deletedata(\'' + row.ID + '\')">删除</a> ';
                        return e + d;
			//这里是创建一个新的列但是列里面自定义了两个按钮用作业务上的操作。
                    }
                }]
            });
        }
    });
}
注意前台要有一个table作为容器,如:
<div>
	<table id = "tb_departments"></table>
</div>

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值