bootstrap-table和layer
来源:互联网 发布:淘宝水星小飞船证吗 编辑:程序博客网 时间:2024/06/05 04:57
bootstrapTable
$('#prjTable').bootstrapTable({ url : basePath + 'prj/info/listPagerPrj', columns : [ { checkbox : true, },/* { field: 'id', title: '序号' },*/ { field : 'projectId', title : '项目编号', align : 'center', },{ field : 'projectName', title : '项目名称', align : 'center', },{ field : 'leaderMan', title : '项目经理', align : 'center', },{ field : 'customerName', title : '客户', align : 'center', },{ field : 'planToStart', title : '计划开始时间', align : 'center', formatter : function(value, row, index) { return row.planToStart.substr(0,10); } },{ field : 'planToEnd', title : '计划结束时间', align : 'center', formatter : function(value, row, index) { return row.planToEnd.substr(0,10); } },{ field : 'gemo', title : '项目范围', align : 'center', formatter : function(value, row, index) { return "<a href='javascript:void(0);' onclick=getGemo(" + "'" + row.projectId + "'" + ")>查看范围</a>" } },{ field : '_op', title : '操作', align : 'center', formatter : function(value, row, index) { return "<a href='javascript:void(0);' onclick=getPrjInfo(" + "'" + row.projectId + "'" + ")>查看明细</a>" } }], method : 'post', //请求方式(*) striped : true, //是否显示行间隔色 cache : false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination : true, //是否显示分页(*) sortable : false, //是否启用排序 sortOrder : "desc", //排序方式 //queryParams: oTableInit.queryParams,//传递参数(*) sidePagination : "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber : 1, //初始化加载第一页,默认第一页 pageSize : 15, //每页的记录行数(*) pageList : [ 30, 60, 100 ], //可供选择的每页的行数(*) search : false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch : true, //精确查找 showColumns : false, //是否显示所有的列 showRefresh : false, //是否显示刷新按钮 minimumCountColumns : 2, //最少允许的列数 clickToSelect : true, //是否启用点击选中行 //height : getHeight(), //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 height: 950, uniqueId : "id", //每一行的唯一标识,一般为主键列 showToggle : true, //是否显示详细视图和列表视图的切换按钮 cardView : false, //是否显示详细视图 detailView : false, //是否显示父子表 showExport : true,//按格式导出 queryParamsType : "limit", toolbar: '#toolbar', //工具按钮用哪个容器 contentType : "application/x-www-form-urlencoded; charset=UTF-8", checkboxHeader : true, singleSelect : true, striped : true, showColumns: true, // 开启自定义列显示功能 queryParams: function queryParams(params) { //设置查询参数 console.log(params); var param = { //这里是在ajax发送请求的时候设置一些参数 params有什么东西,自己看看源码就知道了 page: params.offset / params.limit + 1, rows: params.limit, sort : "id", order : params.order, //下面写自定义查询栏里的内容或者跳转到该页面是查询所带的参数 projectId : $("#projectId").val(), projectName : $("#projectName").val(), }; onLoadSuccess: function(){ //加载成功时执行 layer.msg("数据加载成功!", {time : 1500, icon : 6}); }, onLoadError: function(){ //加载失败时执行 layer.msg("加载数据失败", {time : 1500, icon : 5}); } });}
//查询function queryPrjInfo() { $("#prjTable").bootstrapTable('refresh'); } //重置 function resetPrjInfo() { document.getElementById("searchForm").reset() $("#prjTable").bootstrapTable('refresh'); }
layer弹窗
layer.open({ type: 2, //基本层类型 0(信息框,默认) 1(页面层) 2(iframe层) 3(加载层) 4(tips层) title: "添加项目信息", closeBtn: 1, //layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0 shade: [0.8, '#000'], //弹层外区域。默认是0.3透明度的黑色背景('#000')。 border: [0], area: ['1000px', '1000px'], //宽高 btn: ['<div style="width:80px ;text-align:center">保存</div>','<div style="width:80px ;text-align:center">重置</div>'], content: webBasePath + '/prj/info/addPageprj/'+loginDepartmentId, success: function(layero, index){ //层弹出后的成功回调方法 }, yes: function(index,layero){ save(); }, btn2: function(index,layero){ reset(); }, });
阅读全文
1 0
- bootstrap-table和layer
- SSH和BootStrap-table分页
- bootstrap-table 表头,和内容对齐问题
- bootstrap-table 表头,和内容对齐问题
- bootstrap table表头和内容无法对齐
- BootStrap -- Table
- Bootstrap Table
- bootstrap--table
- Bootstrap table
- bootstrap-table
- bootstrap table
- Bootstrap Table
- bootstrap table
- bootstrap table
- bootstrap table
- bootstrap table
- Bootstrap表格插件--bootstrap-table
- BootStrap-table 客户端分页和服务端分页的区别
- 【偶现】【reboot】【二】java.util.concurrent.TimeoutException
- JAVA连接Redis错误提示(二)
- apache
- Android Launcher启动应用程序流程源码解析
- [RK3288][Android6.0] Fuse将被SDCardFS替换
- bootstrap-table和layer
- Ubuntu17.04 编译Elastic fusion 出现CUDA8.0与GCC版本问题
- 【poj 2406】Power Strings
- Linux下容易被忽视的那些命令用法
- sparse文件简介
- Android N MediaPlayer(一) : MediaMetadataRetriever分析
- 百度语音相关问题汇总
- 计算几何基础
- 网络流--EK算法