layui页面加载简单模式

系统管理员 2021-09-26 08:46 1797阅读 0赞

## 注意如果方法在layui加载页面之后进行，需要form.render();重新渲染页面 ##

> 定义模板id

form表单id 加载数据id<table id="table" lay-filter="test"></table>
    
    
     <select  id="chosen-select" lay-filter="type-select">
    	   <option value="" selected="">请选择描述</option>
    </select>//加载自定义搜索框
    
    /*为下拉框id="chosen-select"加载数据type，description（类型与描述两个属性）*/
    
    /* $(function(){
    	  var html = "";
    		$.ajax({
    			url: '${ctx}/sys/dict/queryTypeList',
    			success : function(data) {
    				//加载数据
    				for (var i = 0; i < data.length; i++) {
    					html += '<option value="' + data[i].type + '">' + data[i].description + '</option>'
    				}
    				$("#chosen-select").append(html);
    			}
    		});
    });  */
    
    /* 定义事件*/
    var tableIns;
     layui.use(['table','laypage'], function(){
    	var form = layui.form;
    	var table = layui.table;
    	var laypage = layui.laypage;
    	 /*监听select框     此方法用以监听id="label"的下拉款事件进行搜索
    	form.on('select(type-select)', function(data){
    		var type = data.value;
    		 var storage=window.localStorage;
    		 storage["type"]=type;
    		var opts = {
    					label: $("#label").val(),
    			}
    		reLoad(opts);
    	}); */
    	/*渲染数据表格*/
    	tableIns = table.render({
    	    elem: '#table'        //table绑定数据id
    	    ,url: '${ctx}/origin/business/manager_json'
    	    ,method: 'post'
    	    ,cellMinWidth: 80
    	    /* ,height: 'full-100' */
    	    ,page:  {
    	     layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    		     // 限定条数   总数、计数  上一页     页     下一页    到第几页、跳
    		     ,curr: 1 
    		     ,groups: 10 //显示 连续页码
    		     ,first: '首页'
    		     ,last: '尾页' 
    		 }
    	    ,even: true //开启隔行背景
    	    ,cols: [[ //表头
    		      {field: 'id', title: 'ID', width:50, type:'numbers', sort: true}
    		      ,{field: 'business_name', title: '企业名称' }
    		      ,{field: 'business_mobile', title: '企业电话',  sort: true}
    		      ,{field: 'business_addr', title: '企业地址', } 
    		      ,{field: 'createdate', title: '创建时间', } 
    		      ,{field: 'remarks', title: '备注',}
    		      ,{field: 'delflag', title: '状态', width:80, templet: '#status'}
    		      ,{fixed: 'right', width:300, align:'center', toolbar: '#toolbar'}
    		    ]]
    	});

> templet：前段模板引擎加载自定义事件（d模板中的属性.name取值）

> toolbar:cols中的属性用来定义操作按钮，

> 自定义方法

> /*新增页面*/  
> function add() \{  
> openIframe(‘增加’,’/add\_manager’);  
> \}

>刷新数据    重写刷新方法，不然会走自定义默认方法
    
    /*刷新数据*/
    function reLoad(opts) {
    	tableIns.reload({
    		page: {
    			 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    		     ,curr: 1 
    		     ,groups: 10 //显示 连续页码
    		     ,first: '首页'
    		     ,last: '尾页' 
    	  	} ,where:
    	  		opts
    	});
    }

*  > 保存页面方法调用(form提交)

layui.use(['form'], function(){
        var form = layui.form;
         //监听提交
      form.on('submit(submitForm)', function(data){
    	  save();  
      })
    });
     /* $("#formSubmit").click(function(){
    		save()
    }); */
    /*保存方法*/
    function save() {
    $.ajax({
    	cache : true,
    	type  : "POST",
    	url   : "${ctx}/origin/business/save_manager",
    	data  : $('#businessForm').serialize(), // 你的formid
    	async : false,
    	error : function(request) {
    		parent.layer.alert("网络超时");
    	},
    	success : function(data) {
    		if (data.code == 0) {
    			parent.layer.msg("操作成功");
    			parent.reLoad();
    			var index = parent.layer.getFrameIndex(window.name);
    			parent.layer.close(index);
    		} else {
    			parent.layer.alert(data.msg);
    		}
    	}
    });

// $(“input:radio\[name=‘isVisible’\]”).attr(‘checked’, ‘true’);

$("\#isVisible").attr(“checked” , “true”)

$("\#isVisible").prop(“checked” , “true”)  
prop()是 jQuery 1.6 开始新增了一个方法，官方建议具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

**在代码中加入debugger执行，可直接进入debug模式**