实例介绍
【实例简介】
【实例截图】
【实例截图】
【核心代码】
$(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 }, { field: 'Name', title: '部门名称' }, { field: 'ParentName', title: '上级部门' }, { field: 'Level', title: '部门级别' }, { field: 'Desc', title: '描述' }, ] }); }; //得到查询的参数 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小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论