layui 补充

监听form提交  
$(function() {
    layui.use('form', function() {
        var form = layui.form;
        //监听提交
        form.on('submit(add)', function(data) {
            
         });
      });
   });

同时
<button class="layui-btn" lay-filter="add" lay-submit="">提交
</button>

*************************************************************************

得到单选框的值

<label>
<input type="radio" name="isWarning" value="0" checked>警告<br>
<input type="radio" name="isWarning"  value="1">不警告<br>
</label>

var isWarning = $("input:radio[name='isWarning']:checked").val()

*******************************************************************************  

快速搭建一个table 表格

后端需要接收layui传入的limit  page参数

layui.config({
    base: '/layui/extend/'
}).extend({
    treetable: 'treetable-lay/treetable'
// 使用table 和JQ
}).use(['table', 'jquery'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    // 渲染表格
    layer.load(2);
    var renderTable = function(){
        table.render({
            // 需要填写table 的id
            elem: '#table',
//  异步请求路径
            url : "/offline/getAll",
// 开启分页模式
            page : true,
            height : "full-125",
// 分页数量
            limits : [10,15,20,25],
// 10个为一页
            limit : 10,
            id : "id",
            cols: [
                [{type: 'numbers'},
//  返回的信息的对应字段
//  checkbox : true 可以复选
                     {checkbox: true},
                    {field: 'name', minWidth: 200, title: '员工姓名'},
                    {field: 'category', minWidth: 200, title: '录入车间'},
                    {field: 'info', minWidth: 200, title: '批次信息'},
                    {field: 'newnums', width: 200, align: 'center', title: '原始数量'},

//<!-- layui事件 js-->  这个是在主html页面添加的script   该id 对应templet id
//<script type="text/html" id="auth-state">
//    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit" //shiro:hasPermission="esbConfig:update">编辑</a>
//</script>

                    {templet: '#auth-state', width: 120, align: 'center', title: '查看'}]
            ],
            done: function () {
                layer.closeAll('loading');
            }
        })

    }
// 调用该method
    renderTable()
//监听table 的点击事件， 该table 可以从前端查询到------
//<table id="indecTable" lay-filter="indecTable"></table>
table.on('tool(indecTable)', function (obj){
    var data = obj.data;
    if (obj.event === 'edit') {      //编辑
        console.log(data)
        
    }
})
})

设置点击弹窗

$("#请帮定一个按钮的id").click(function () {
    layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['500px', '520px'], //宽高
        title: "添加离线物料",
        btn: ['取消'],
        content: $('#divEdit'),  //调到新增页面 该页面在主html中写出，其ID是divEdit
        end:function () {
            location.reload()
        }
    });
})

这是前端页面的 小弹窗页面代码   display:none 是不显示

<div id="divEdit" style="display: none">
    <form class="layui-form-pane" action="" id="formEdit">

        <input type="hidden" id="gId" name="gId">
        <input type="hidden" id="rowId" name="rowId">
        <input type="hidden" id="atc" name="atc" value="add">
        <div class="layui-form-item">
            <label class="layui-form-label">消息名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" required="" lay-verify="required" placeholder="请输入消息名称"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据来源</label>
            <div class="layui-input-block">
                <input type="text" id="source" name="source" required=""  placeholder="请输入数据来源"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">接口服务</label>
            <div class="layui-input-block">
                <input type="text" id="serviceName" name="serviceName" required=""  placeholder="请输入接口服务标识"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" id="description" name="description" required=""  placeholder="请输入备注"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

 

注意：java后端在通过HashMap发送json时候，不光要put 数据元还需要需要put

hm.put("code", 0);
hm.put("msg", "请求成功");
hm.put("count", page.getTotal()); // 得到一共查询了多少页

这样前端才能正常显示查询页数的值。

树形表格渲染

// 渲染表格
var renderTable = function(){
    treetable.render({
    treeColIndex: 1,
    treeSpid: 0,
    treeDefaultClose: true,
    treeIdName: 'dictionaryId',//子类树id 当子树的id指向父id说明该项是某父树枝数据的子树枝。layui根据该id分配到对应父树枝
    treePidName: 'parentId', //该值是父类树枝的分配id如果为0则layui自动画为父树，如果不为0 则画为子树
    elem: '#treetable',
    url: '/dictionary/list',
    cols: [
        [{type: 'numbers'},
            {field: 'dictionaryName', minWidth: 200, title: '属性名称'},
            {field: 'dictionaryField', minWidth: 200, title: '英文标识'},
            {field: 'dictionaryValue', minWidth: 200, title: '属性值'},
            {field: 'createTime', width: 200, align: 'center', title: '添加时间'},
            {templet: '#auth-state', width: 120, align: 'center', title: '操作'}]
    ],
    done: function () {
        layer.closeAll('loading');
    }
});
}