实例介绍
【实例简介】
基于bootstrap的一个表格实现，表格方面做了调整，行列可动态生成等。
【实例截图】
【核心代码】
$(function () {
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_departments').bootstrapTable({
url: '/Home/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
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
/*radio: true*/
}, {
field: 'Name',
title: '部门名称'
}, {
field: 'ParentName',
title: '上级部门'
}, {
field: 'Level',
title: '部门级别'
}, {
field: 'Desc',
title: '描述',
}, {
field: 'operation',
title: '操作',
width: 100,
formatter: function (value, row, index) {
var s = '<a class = "save" href="javascript:void(0)">保存</a>';
var d = '<a class = "remove" href="javascript:void(0)">删除</a>';
return s ' ' d;
},
events: 'operateEvents'
}]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
departmentname: $("#txt_search_departmentname").val(),
statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
$("#btn_add").click(function () {
$("#myModalLabel").text("新增");
$("#myModal").find(".form-control").val("");
$('#myModal').modal()
postdata.DEPARTMENT_ID = "";
});
//$("#btn_edit").click(function () {
// var arrselections = $("#tb_departments").bootstrapTable('getSelections');
// if (arrselections.length > 1) {
// toastr.warning('只能选择一行进行编辑');
// return;
// }
// if (arrselections.length <= 0) {
// toastr.warning('请选择有效数据');
// return;
// }
// $("#myModalLabel").text("编辑");
// $("#txt_departmentname").val(arrselections[0].DEPARTMENT_NAME);
// $("#txt_parentdepartment").val(arrselections[0].PARENT_ID);
// $("#txt_departmentlevel").val(arrselections[0].DEPARTMENT_LEVEL);
// $("#txt_statu").val(arrselections[0].STATUS);
// postdata.DEPARTMENT_ID = arrselections[0].DEPARTMENT_ID;
// $('#myModal').modal();
//});
//$("#btn_delete").click(function () {
// var arrselections = $("#tb_departments").bootstrapTable('getSelections');
// if (arrselections.length <= 0) {
// toastr.warning('请选择有效数据');
// return;
// }
// Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
// if (!e) {
// return;
// }
// $.ajax({
// type: "post",
// url: "/Home/Delete",
// data: { "": JSON.stringify(arrselections) },
// success: function (data, status) {
// if (status == "success") {
// toastr.success('提交数据成功');
// $("#tb_departments").bootstrapTable('refresh');
// }
// },
// error: function () {
// toastr.error('Error');
// },
// complete: function () {
// }
// });
// });
//});
//$("#btn_submit").click(function () {
// postdata.DEPARTMENT_NAME = $("#txt_departmentname").val();
// postdata.PARENT_ID = $("#txt_parentdepartment").val();
// postdata.DEPARTMENT_LEVEL = $("#txt_departmentlevel").val();
// postdata.STATUS = $("#txt_statu").val();
// $.ajax({
// type: "post",
// url: "/Home/GetEdit",
// data: { "": JSON.stringify(postdata) },
// success: function (data, status) {
// if (status == "success") {
// toastr.success('提交数据成功');
// $("#tb_departments").bootstrapTable('refresh');
// }
// },
// error: function () {
// toastr.error('Error');
// },
// complete: function () {
// }
// });
//});
//$("#btn_query").click(function () {
// $("#tb_departments").bootstrapTable('refresh');
//});
};
return oInit;
};
标签： 编辑
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论