Layui布局页面设计:

1、layui简介：

        是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式。主要面向的是全层次的前后端开发者，极易上手，开箱即用，非常适合网页界面的快速开发。(若依)

2、栅格系统：

3、body中各类标签写法及作用：

1、必填项 ：lay-verify="required|name"

2、输入记录提示（off为关闭提示）：autocomplete="off"

3、选择什么按钮 ：lay-filter=" * "

4、

4、script中固定写法：

1、分页 : page:true

2、默认工具条 ：defaultToobar:['filter','exports','print'],

3、field 与传过来的list属性列对应 ：{field:'name',title:'名称',width:100},

5、固定方法写法：

        *加载动态表格：

table.render({
    elem:'#对应定义表格id名称',
	//url:'',
	col:[[
        {type:'numbers',fixed:'left'},//fixed:'left' 固定在左侧
		{type:'checkbox',fixed:'left'},
		{field:'name',title:'姓名',width:100},
		{field:'studentNo',title:'学号',width:150},
		{field:'sex',title:'性别',width:80},
		{field:'age',title:'年龄',width:80},
		{field:'birthday',title:'出生日期',width:200},
		{fixed:'right',title:'操作',align:'center',width:80}
	]]，
    data:data
})
				

       *监听form表单的操作：

                1、：

//通过按钮点击去表单元素的性别进行修改

//obj 一整行对象
form.on('switch(sexCheckbox)',function(obj){
    
    内容......
    
    var sex = 9;
    if(obj.elem.checked){
        sex=1;
    }else{
        sex=2;
    }
    //alert("对id="+this.value+"的记录修改"+this.name+"="+sex);
})

                2、：

      *按钮生成及隐藏权限：

<script id="tableBar" type="text/html">**</script>

      *滚动条：

<div class="layui-side-scroll"></div>

       * 垂直导航：

<ul class="layui-nav layui-nav-tree">

    <li class="layui-nav-item layui-nav-itemed">

        <a href="javascript:;">***</a><!--父菜单-->

        <dl class="layui-nav-child">
            <!--子菜单-->
            <dd><a>***</a></dd>
            <dd><a>***</a></dd>
            <dd><a>***</a></dd>
        </dl>

    </li>

</ul>

       * 行内按钮：

<script id="tool" type="text/html">
	<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>


加载动态表格时需加上：

    {fixed:'right',title:'操作',width:150,align:'center',toolbar:'#tool'},

       *

       *

       *

       *

       *

       *

       *

       *

       *