layUI

 项目中突然使用了layui当时看文档看的比较懵逼，但是自己做了一些例子感觉就没有那么难了 用的都是一些基本的数据操作

api上的例子还是比较好的。例如

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
  });
});

</script>

建一个table给一个id =test 后台返回的数据要和layui接收的数据一样查询出结果后用jsonObject再包裹一下  field里面的字段属性就是你页面table需要展示的数据 ， url是你后台接口的路径   基本的数据展示就是这样的 是不是很简单~~~  layui最重要的感觉就是渲染。

----------------------------------------------------------------------------------------------------------------------------------

 <p><input type="submit" value="登录">&nbsp<input type="reset"  lay-submit=""   value="重置"  lay-filter="login2"></p>

<script type="text/javascript">
layui.use(['form', 'layedit'], function(){
    var form = layui.form
     , layer = layui.layer
     , $ = layui.jquery;
form.on('submit(login2)', function(data){
alert("11");
  alert(data);
});
});

</script>

事件的监听 我感觉和自己写ajax一样  用form.on必须实现use模板

默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。

如：<select lay-filter="test"></select>

 

1. form.on('select(test)', function(data){
2. console.log(data);
3. });

 

----------------------------------------------------------------------------------------------------------------------------------

 

初始化给你指定表单元素赋值

 

1. //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
2. form.val("formTest", {
3. "username": "贤心" // "name": "value"
4. ,"sex": "女"
5. ,"auth": 3
6. ,"check[write]": true
7. ,"open": false
8. ,"desc": "我爱layui"
9. })

 

-----------------------------------------------------------------------------------------------------------------------------------------------

后台返回的是Date类型 需要把时间弄到layui时间控件上freemake回显的 ${''?datetime}