Layui 框架说明

最新推荐文章于 2023-07-10 22:08:19 发布

微小的xx

最新推荐文章于 2023-07-10 22:08:19 发布

阅读量1.2k

点赞数

文章标签： layui 前端

本文链接：https://blog.csdn.net/qq_20025777/article/details/121669627

版权

一、参考文档：

https://www.layui.com/doc/

https://www.kancloud.cn/sansui/easyweb/2141288

二、参考例子：

https://www.layui.com/demo/

https://demo.easyweb.vip/iframe/

三、公用方法

1、loading

$("body").mLoading();//显示
$("body").mLoading("hide");//隐藏

2、信息提示

notify.success("成功");
notify.warning("警告");
notify.info("提示");
notify.error("错误");

_type：success\info\error\warning

3、通过父窗口刷新table

callbackReloadTable(layid);

不带参数刷新当前tab中iframe表格
带参数刷新指定src=layid的iframe表格，layid在iframe中得到layid=top.$(“div.layui-tab-content .layui-show iframe”).attr(“src”);

function callbackReloadTable(layid){
	try {
		if(layid){//layid存在时调用指定iframe
			$("div.layui-tab-content iframe[src='"+layid+"']")[0].contentWindow.reloadTable();
        }else{//layid不存在时调用当前窗口iframe
            $("div.layui-tab-content .layui-show  iframe")[0].contentWindow.reloadTable();
        }
    }catch (e) {
       	console.log("刷新表格失败！！");
    }

}

iframe中reloadTable方法：

function reloadTable(){
    layui.table.reload('dataTable');//dataTable为表格ID
}

用于top.layer.open打开窗口时，调用top.callbackReloadTable()方法刷新iframe中的table，其它模块刷新，调用模块自己刷新即可，不需要使用这个

4、刷新当前tab中iframe

top.$("div.layui-tab-content .layui-show  iframe")[0].contentWindow.location.reload(true);

5、展开tree第一层节点

callback: {
    onAsyncSuccess: zTreeOnAsyncSuccess//异步加载正常结束的事件回调函数
}

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    //初始化时
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.getNodes();
    if (nodes.length > 0) {

        for (var i = 0; i < nodes.length; i++) {
            treeObj.expandNode(nodes[i], true, false, false);//默认展开第一级节点
        }

    }

}

5、刷新树节点

    /**
     * 刷新当前树节点，有传值时刷新传入值节点
     */
 	function refreshNode(nodeId) {
        /*根据 treeId 获取 zTree 对象*/
        var zTree = $.fn.zTree.getZTreeObj("documentLeftTree"),
            type = "refresh",
            silent = false,
            /*获取 zTree 当前被选中的节点数据集合*/
            nodes = zTree.getSelectedNodes();
        if(nodeId!==undefined) {
            nodes[0] = treeObj.getNodeByParam("id", nodeId);
        }
        /*强行异步加载父节点的子节点。[setting.async.enable = true 时有效]*/
        zTree.reAsyncChildNodes(nodes[0], type, silent);
    }

    /**
     * 刷新当前节点的父节点，有传值时刷新传值的父节点
     */
    function refreshParentNode(nodeId) {
        var zTree = $.fn.zTree.getZTreeObj("documentLeftTree"),
            type = "refresh",
            silent = false,
            nodes = zTree.getSelectedNodes();
        if(nodeId!==undefined) {
            nodes[0] = treeObj.getNodeByParam("id", nodeId);
        }
        /*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/
        var parentNode = zTree.getNodeByTId(nodes[0].parentTId);

        //zTree.selectNode(parentNode);//选中指定节点
        zTree.reAsyncChildNodes(parentNode, type, silent);

    }

调用方法：top.refreshNode()\top.refreshParentNode()

五、layui监听方法

先在要监听的对象属性中加上lay-filter=“XXX”

1、表格行监听

table.on('row(XXX)', function(obj){ //XXX为表格lay-filter属性值
    var data = obj.data;
    
    layer.alert(JSON.stringify(data), {
        title: '当前行数据：'
    });
    //标注选中样式
    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
});

2、表格中获取选中行方法

var data = layui.table.checkStatus('tableId').data; //tableId为表格id值
console.log(JSON.stringify(data));

3、表格中复选框点击监听方法

table.on('checkbox(XXX)', function(obj){ //XXX为表格lay-filter属性值
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
  console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

4、表格中单选钮监听方法

table.on('radio(XXX)', function(obj){ //XXX为表格lay-filter属性值
  console.log(obj); //当前行的一些常用操作集合
  console.log(obj.checked); //当前是否选中状态
  console.log(obj.data); //选中行的相关数据
});

5、下拉列表select监听

form.on('select(XXX)', function(data){ //XXX为select的lay-filter属性值
	layui.layer.msg(data.value);//得到被选中的值
	layui.layer.msg(data.elem); //得到select原始DOM对象
 })

6、表单中复选框checkbox监听

form.on('checkbox(XXX)',function(data){ //XXX为checkbox的lay-filter属性值
	//console.log(data.elem) //得到checkbox原始DOM对象
	//console.log(data.elem.checked) //是否选中，true或false
	//console.log(data.vale) //复选框的值，也可以通过data.elem.value得到
	//console.log(data.othis) //得到美化后的DOM对象
})

7、表单中单选框radio监听方法

form.on('radio(XXX)', function (data) { //XXX为radio的lay-filter属性值
　　console.log( data );　　//打印当前选择的信息
    if( data.elem.checked){　　　　　　//判断当前多选框是选中还是取消选中
        alert('当前选中');
    }else{
　　　　　alert('取消选中')　
　　 }
　　var value = data.value;   //  当前选中的value值
});