码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap table使用小记

时间:2018-04-09 00:09:09      阅读:646      评论:0      收藏:0      [点我收藏+]

标签:tab选项卡   控制器   tco   turn   script   sadd   调试   fail   arch   

技术分享图片

var
TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $(‘#tb_rolelist‘).bootstrapTable({ url: ‘/Role/GetList‘, //请求后台的URL(*) method: ‘get‘, //请求方式(*) toolbar: ‘#toolbar‘, //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 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: [{ checkbox: true, visible: true //是否显示复选框 }, { field: ‘RoleName‘, title: ‘角色名称‘, }, { field: ‘Remark‘, title: ‘说明‘, },{ field: ‘Id‘, title: ‘操作‘, width: 120, align: ‘center‘, valign: ‘middle‘, formatter: actionFormatter//自定义列显示 }], onLoadSuccess: function () {         //加载成功 }, onLoadError: function () { //showTips("数据加载失败!"); }, onDblClickRow: function (row, $element) { var id = row.ID; }, }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 pageSize: params.limit, //页面大小 pageIndex: (params.offset / params.limit) + 1, //页码 remark: $("#txt_search_remark").val(), //自定义查询条件 roleName: $("#txt_search_roleName").val() }; return temp; }; return oTableInit; }

//操作栏的格式化
function actionFormatter(value, row, index) {
    var id = value;
    var result = "";
    result += "<a href=‘javascript:;‘ class=‘btn btn-xs green‘ onclick=\"DetailViewById(‘" + id + "‘, view=‘view‘)\" title=‘查看‘><span class=‘glyphicon glyphicon-search‘></span></a>";
    result += "<a href=‘javascript:;‘ class=‘btn btn-xs blue‘ onclick=\"EditViewById(‘" + id + "‘)\" title=‘编辑‘><span class=‘glyphicon glyphicon-pencil‘></span></a>";
    result += "<a href=‘javascript:;‘ class=‘btn btn-xs red‘ onclick=\"DeleteById(‘" + id + "‘)\" title=‘删除‘><span class=‘glyphicon glyphicon-remove‘></span></a>";


    return result;
}


function EditViewById(id) {
    parent.$("#mainFrameTabs").bTabsAdd("Edit" + id, "编辑角色", "/Role/Edit?id=" + id);//操作tab选项卡
}
function DeleteById(id) {
    $.ajax({
        type: "post",
        url: "/Role/Delete",
        data: { "id": id },
        success: function (data, status) {
            $(‘#tb_rolelist‘).bootstrapTable(‘refresh‘);
        },
        error: function () {
            alert("Failed");
        }


    });
}

 

还有个 改变行样式的处理函数,根据需求决定受否使用

rowStyle: function (row, index) {
                //这里有5个取值代表5中颜色[‘active‘, ‘success‘, ‘info‘, ‘warning‘, ‘danger‘];
                var strclass = "";
                if (row.RoleName === "待排产") {
                    strclass = ‘success‘;//还有一个active
                }
                else if (row.RoleName === "已删除") {
                    strclass = ‘danger‘;
                }
                else {
                    return {};
                }
                return { classes: strclass }
            },

更多参考https://www.cnblogs.com/wuhuacong/p/7284420.html

右上角刷新那个工具栏有点与众不同,显示的有问题,多次调试无果,生活还得继续,调试还得进行

 

bootstrap table使用小记

标签:tab选项卡   控制器   tco   turn   script   sadd   调试   fail   arch   

原文地址:https://www.cnblogs.com/0306Leaves/p/8747923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!