标签: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
右上角刷新那个工具栏有点与众不同,显示的有问题,多次调试无果,生活还得继续,调试还得进行
标签:tab选项卡 控制器 tco turn script sadd 调试 fail arch
原文地址:https://www.cnblogs.com/0306Leaves/p/8747923.html