一级页面功能实现规范1.0

项目相关

多数函数复制代码调用的时候传参就可以实现相应功能，部分函数内部需根据需求相应更改，具体看注释

需要用到的layui模块，大概调用流程，函数在下面详细解释

layui.use(['element','form','table','laypage'], function(){
        var element = layui.element;
        var form = layui.form;
        var YL_table = layui.table;
        var YL_laypage = layui.laypage;
        form.render();//form渲染
        //form.on为下拉框事件，只需要改变('select(你的option值)')
        form.on('select(talent)', function(){
        //更新表格数据
            getPageNum("Talent",YL_table,YL_laypage);
        });
        //初始化
        getPageNum("Talent",YL_table,YL_laypage);
        //数据表格操作事件
        clickTable(YL_table);
        //搜索框事件委派添加
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
				// console.log(demoReload.val());
				table.reload('testReload', {
					where: {
					}
				});
			}
		};
		$('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            //执行函数
            getPageNum("Talent",table,YL_laypage);
        });
    });

1.初次查询结合联合查找功能，如果不希望采用外部定义filter值可以直接参考ajax请求，但是下面的数据库条数获取请求必须使用外部filter，所以推荐直接使用该方法

函数名：pushFilter(skip)
函数内容：

//没有搜索功能时
var pushFilter = function(skip){
    filter = {
        "where":{},
        "skip": (skip-1)*10,
        "limit": 10,
    }
    return filter;
}

//有搜索条件时
//动态改变查询数据库的filter值
//根据需要更改获取的数值以及if
//skip为filterJSON对象里skip服务，第一次查表置一即可
var pushFilter = function(skip){
    var talent = $('#talent').val();
	var sate = $('#sate').val();
    var demoReload = $('#demoReload').val();
    var filter ;
    var filterarray = Array();
    if(talent && talent!=''){
        filterarray.push({"Job":talent});
    }
    if(sate && sate!=''){
        if(sate && sate=='未审核'){
            filterarray.push({"Type":0});
        }else{
            filterarray.push({"Check":sate});
        }
    }
    if(demoReload && demoReload!=''){
        filterarray.push({"Name":demoReload});
    }
    // console.log(JSON.stringify(filterarray));
    //下面不需要改动
    if(filterarray.length!=0){
        filter = {
            "where":{"and":filterarray},
            "skip": (skip-1)*10,
            "limit": 10,
        }
    }else{
        filter = {
            "where":{},
            "skip": (skip-1)*10,
            "limit": 10,
        }
    }
    return filter;
}

配置文件：
使用方法：
注意事项：

2.分页功能

函数名：getPageNum(Class,table,YL_laypage)
函数内容：

//Class：查找数据库表的名称
//table：操作的layui.table数据表
//YL_laypage：操作的layui.laypage分页
var getPageNum = function(Class,table,YL_laypage){
    var filter=pushFilter(1);
    $.ajax({
        "url": "https://d.apicloud.com/mcm/api/"+Class+"/count?filter="+ encodeURIComponent(JSON.stringify(filter)),
        "cache": false,
        "headers": header,
        "type": "GET"
    }).success(function (data, status, header) {
        //console.log(data.count);
        //分页功能，不需要改动
        YL_laypage.render({
            elem: 'demo7'
            ,count: data.count
            ,layout: ['count', 'prev', 'page', 'next', 'skip']
            ,jump: function(obj){
                //点击页数操作，更换数据库查询skip并更新数据库表，如果其他函数配置好了，不出意外这两个函数不用改变
                // console.log("obj"+obj.curr);
                filter=pushFilter(obj.curr);
                getData(Class,table,filter);
            }
        });
    }).fail(function (header, status, errorThrown) {
    //fail body
        console.log(errorThrown);
    });
}

配置文件：
使用方法：
注意事项：

3.数据表格生成功能

函数名：getData（Class,table,filterDB）
函数内容：

//数据库获取函数
//Class：查找数据库表的名称
//table：操作的layui.table数据表
//filterDB：数据库ajax请求的filter
//传参即可不需要改变
var getData = function(Class,table,filterDB){
    $.ajax({
        "url": "https://d.apicloud.com/mcm/api/"+Class+"?filter="+ encodeURIComponent(JSON.stringify(filterDB)),
        "type": "GET",
        "headers": header
    }).done(function(data, status, header){
    //initTableData数据表格渲染函数，如果需要对从数据库返回的data进行修改可以在此处另声明一个变量acdata然后将变量acdata代替data传入，即initTableData(table,acdata);
        initTableData(table,data);
    }).fail(function(err){
        console.log(1);
    });
};
//渲染数据表格
//需要自行更改表格数据field其他的不用改变
var initTableData=function(table,detail){
    table.render({
        elem: '#demo'
        ,data: detail
        ,cols: [[ //标题栏
            {field: 'Num', title: '序号', width: 80,align:'center',}
            ,{field: 'Name', title: '姓名', width: 140, align:'center',}
            ,{field: 'Job', title: '人才分类', width: 140,align:'center'}
            ,{field: 'Check', title: '审核状态', width: 140,align:'center'}
            ,{field: 'TracerName', title: '审核人', width: 140,align:'center'}
            ,{field: 'updatedAt', title: '更新日期', width: 300,align:'center'}
            ,{field:'right', title: '操作', width:137,toolbar:"#barDemo",align:'center'}
        ]] 
        ,skin: 'col' //表格风格
        ,even: true
        ,page: false //是否显示分页
        ,limit:10 //每页默认显示的数量
        ,id: 'testReload'
    });
}

配置文件：无
使用方法：代码备注中
注意事项：数据表格sort排序慎加

4.select筛选功能

函数名：没有函数

函数内容：
html

 <form class="layui-input-inline layui-form">
 //区分标识lay-filter需要注意
    <select name="quiz2" lay-filter="talent" id="talent">
      <option value="">人才分类</option>
      <option value="产品">产品</option>
      <option value="JAVA">JAVA </option>
      <option value="前端">前端</option>
      <option value="全栈">全栈</option>
      <option value="物联网">物联网</option>
    </select>
  </form>

js(写在layui.use里）

//form.on为下拉框事件，只需要改变('select(你的option值)')
        form.on('select(talent)', function(){
           //执行函数，触发分页功能重新查表重新加载数据表，不出意外改一下第一个参数改为你想要搜索的表就行即“Talent”
            getPageNum("Talent",YL_table,YL_laypage);
        });

配置文件：
使用方法：
注意事项：

5.删除功能

函数名：Delete（）

函数内容：

var Delete = function(Class,id){
        $.ajax({
            "url": "https://d.apicloud.com/mcm/api/"+Class+"/"+id,
            "type": "POST",
            "cache": false,
            "headers": header,
            "data": {
                "Visible_grade": "1",
                "_method": "PUT"
            }
      }).done(function (data, status, header) {
            //success body
            console.log('aaa');
            getDate();
            reloadpage(laypage);
      }).fail(function (header, status, errorThrown) {
            //fail body
            console.log('errer');
      })
    }

配置文件：无

使用方法：放在需要加删除事件的函数中，Class为所想要发送json请求的表名，id为想要进行删除操作的数据库表内的id。（删除是把表内的Visible_grade值置为1，不是真正的删除，请注意。）

注意事项：Delete（）内的getDate()与reloadpage(laypage)是相应的数据表格和分页内容刷新（详情请看1，2）,请根据相应业务更改所需的函数操作！！

6.弹出层功能

函数名：无
函数内容：

• 先声明要弹出元素的变量名；
• 再初始化变量

配置文件：

• 先下载layer包（在layui文档弹出层内容中有链接）
• 再把layer包中的layer文件夹放在asset/js下面
• 再引layer.js文件(要写在jquery-1.11.3.min.js引用下面，目前自己写功能时需要引用，之后整合完就不用看配置文件这一步了)
  

  <script src="assets/js/layer/layer.js"></script>

使用方法：

var demo1;
demo1 = layer.load(2); //此处为给demo1初始化你想要的弹出层样式
lay.close(demo1);      //想关闭这个弹出层就用这个方法随意位置关闭

注意事项：详情可以看我之前的弹出层文档，或直接去layer官网查询。

7.点击跳转页面

函数名：clickTable（）
函数内容：
静态代码：
lay-event和obj.event对应

<script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-mini" lay-event="edit">审核</a>
      <a class="layui-btn layui-btn-mini" lay-event="delete">删除</a>
</script>

动态代码：

var clickTable=function(table){
    table.on('tool(useruv)', function(obj){
        var ID = obj.data.id ;
        if(obj.event === 'edit'){
        }
        if(obj.event === 'delete'){
            console.log('delete');
        }
    });
};

配置文件：table为数据表格元素，所以一般把本函数放在数据函数加载完之后调用。
使用方法：按示例中先从一级页面获取要传送内容然后通过location.href传送参数。
注意事项：parseURL方法内参数为location.href。引用时请注意
静态代码里的lay-event与动态代码里的obj.event相对应

8.隔页面传参功能

一级页面跳转页面处的js

window.location.href='页面名?'+"属性="+传参的数值;

二级页面内：
动态代码：

var parseURL = function(loc){                  
    //从父级页面获取传参id
    var n1 = loc.length;//地址的总长度
    var n2 = loc.indexOf("=");//取得=号的位置
    var id = decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
    return id;
}