前端LayUI框架使用记录，及一些和jquery的结合使用

1.使用layui表格控件时，如果刷新了页面。而之前点开了表格中的内容显示出了小框口，则该小框口不会自动隐藏，需要自己处理如下：

$('.layui-table-tips').remove();

2.如果layui表单中有两个下拉框，且其中一个下拉框的点击会改变另一个下拉框的内容，比如选择省份和城市，可以用layui表单监听省份下拉框的改变，再根据改变渲染城市下拉框，最终都要form.render 重新渲染表单，那么如何通过代码主动触发监听代码呢？

layui.event.call("#edit_prvId", 'form', 'select(geteditCity)', data); 
第一个参数为省份下拉框id ， 第二个参数为表单的意思 
第三个参数为表单的下拉框监听，且监听 lay-filter为 geteditCity的下拉框
第四个参数为触发监听时，传过去的 数据对象

layui.onevent(modName, events, callback)  用于自定义的模块事件。
	layui.event(modName, events, params) 用于执行模块事件，包括自定义的模块,像之前的主动触发下拉框监听即可用此方法。此方法用处很多，之后在研究。




//下拉监听
            form.on('select(geteditCity)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                $("#edit_cityId").html("");
//默认data为选择下拉框item的value
                var id = data.value;
//主动触发传过来的数据格式不一样
                if (data.prvId != undefined) {
                    id = data.prvId;
                } else if (data.PrvId == "") {
                    return;
                }

                //获取城市列表
                $.ajax({
                    url: apiUrl + '/api/facechat/manage/v1/citinfo/citylist?prvId=' + id,
                    type: 'get',
                    cache: false,
                    success: function (res) {
                        if (res) {
                            //数据格式化
                            $.each(res, function (i, item) {
                                $("#edit_cityId").append("" + item.cityName + "");
                            });

                            if (data.prvId != undefined) {
                                $("#edit_cityId").val(data.cityId);
                            }
                            form.render();
                        }
                    },
                    error: function (result) {
                    }
                });

            }); 

3.jquery中的 $().on（）方法 和 标签属性 data-type 结合使用。

 $("p").on("click",function(){
    alert("段落被点击了。");
  });


on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。


语法
$(selector).on(event,childSelector,data,function)
参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

上面介绍了 on方法的使用，那么如何与data-type 自定义属性结合使用呢？

定义和用法
data-* 属性用于存储私有页面后应用的自定义数据。
data-* 属性可以在所有的 HTML 元素中嵌入数据。


data-* 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。

假如有许多按钮都添加了 data-type属性(其实是type属性，data会自动忽略)，且设置值为不同，如果我们想统一管理这些按钮的点击方法，则写如下：

通过class 或 标签名 或 id 找到这些 想要统一管理的按钮，然后动态监听 click方法，


$('.pageContent .btn, .demoTablesttr .layui-btn').on('click', function () {
//得到这些按钮 的自定义属性 type的值
                var type = $(this).data('type');
//根据值去找对应的方法，统一在 active中
                active[type] && active[type].call(this);
});

//active 示例如下：

active = {
                reload: function () {
                    、、
                },
                getCityList: function () {
                    、、
                },
                batchSetUseType: function () {
                    、、
                }
            };