layui使用总结

一、表格调用格式：将table渲染方法封装放在jquery方法中，可以防止表格样式展示异常

layui.use(['jquery', 'table', 'upload', 'slider', 'laydate', 'form'], function () {
    var laydate = layui.laydate;
    var table = layui.table;

$(function(){

initTable();

function initTable() {
    table.render({
        elem: '#table'
        , url: "xxxxxxxx"
        , loading: true
        ,cols: [[ //标题栏
            {field: 'id', title: 'ID',hide:true}
            ,{type:'radio'}
            ,{field: 'userName', title: '姓名',align: 'center'}
            ,{field: 'cityName', title: '市公司',align: 'center'}
            ,{field: 'countryName', title: '县公司',align: 'center'}
            
        ]]
        //,skin: 'line' //表格风格
        ,even: true
        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: [ 'count', 'prev', 'page', 'next'] //自定义分页布局
            ,groups: 2 //只显示 1 个连续页码
        } //是否显示分页
        ,limit: 5 //每页默认显示的数量
        ,done: function (res, curr, count) {
            $("td .layui-table-cell").on("mouseenter", function (e) {
                if (this.parentNode && this.parentNode.className == 'layui-table-col-special') {
                    return;
                } else {
                    var w1 = this.offsetWidth;
                    var w2 = this.scrollWidth;
                    if (w1 < w2) {
                        layui.layer.tips(this.innerText, this);
                    }
                }
            });
            $("td .layui-table-cell").on("mouseout", function (e) {
                layui.layer.tips('');
            });
            tdTitle();
        }
    });
    function tdTitle() {
        $('th').on("mouseenter", function () {
            layui.layer.tips($(this).text(), this);
        });
    };
}

});

　});

 

 

二、table

1、单击行选中事件（单选和复选）

$(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
    var index = $(this).attr('data-index');
    var tableBox = $(this).parents('.layui-table-box');
    //存在固定列
    if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
        tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
    } else {
        tableDiv = tableBox.find(".layui-table-body.layui-table-main");
    }
    var CheckLength = tableDiv.find("tr[data-index=" + index + "]").find(
        "td div.layui-form-checked").length;

    var checkCell = tableDiv.find("tr[data-index=" + index + "]").find(
        "td div.laytable-cell-radio div.layui-form-radio I");
    if (checkCell.length > 0) {
        checkCell.click();
    }
});

$(document).on("click", "td div.laytable-cell-radio div.layui-form-radio", function (e) {
    e.stopPropagation();
})

radio是单选  checkbox是复选