layui使用总结 - 路修远而求索

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是复选