项目中突然使用了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="登录"> <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>
- form.on('select(test)', function(data){
- console.log(data);
- });
----------------------------------------------------------------------------------------------------------------------------------
初始化给你指定表单元素赋值
- //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
- form.val("formTest", {
- "username": "贤心" // "name": "value"
- ,"sex": "女"
- ,"auth": 3
- ,"check[write]": true
- ,"open": false
- ,"desc": "我爱layui"
- })
-----------------------------------------------------------------------------------------------------------------------------------------------
后台返回的是Date类型 需要把时间弄到layui时间控件上freemake回显的 ${''?datetime}