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();  },  });
原创粉丝点击