layui页面加载简单模式

注意如果方法在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取值）

<script type="text/html" id="status">
	{{# if(d.delflag == 0) { }}
		<button class="layui-btn layui-btn-sm">正常</button>
	{{# } else { }}
		<button class="layui-btn layui-btn-sm layui-btn-danger">禁用</button>
	{{# } }}

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

<script type="text/html" id="toolbar">
  	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">查看</a>
  	<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
  	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>

	/*监听工具条*/
	table.on('tool(test)', function(obj){ 
		var data = obj.data; /*获得当前行数据*/
		var layEvent = obj.event; /*获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）*/
		var tr = obj.tr; /*获得当前行 tr 的DOM对象*/
		if(layEvent === 'detail'){
		 
		}else if(layEvent === 'del'){
		 	layer.confirm('真的删除行么', function(index){
			    layer.close(index);
			    /*向服务端发送删除指令*/
			    alert(data.id);
			    $.ajax({
					url : prefix + "/delete",
					type : "post",
					data : {'id' : data.id},
					success : function(data) {
						if (data.code == 0) {
							obj.del(); /*删除对应行（tr）的DOM结构，并更新缓存*/
							layer.msg(data.msg);/*后台定义的返回值方法*/
						} else {
							layer.msg(data.msg);
						}
					}
				});
			});
		}else if(layEvent === 'edit'){
		 	/*打开修改页面*/
			openIframe('修改','/update_manager/'+data.id);
		}
	});
});

自定义方法

/新增页面/
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模式