关于 X-admin 框架应用时候遇到的问题记录

1：在首页页面加载完成之后，点击左侧列表之后再点击不会刷新的问题：

　　其实这个问题是在Xadmin 2.2 的时候都已经解决了，只是需要自己去查看 xadmin.js 中add_tab的方法，里面有三个参数，最后一个就是关于再点击左侧菜单是否刷新页面（不填写第三个参数时候默认不刷新页面，当填写true 时候就是每次点击左侧菜单就会触发刷新页面）。

2：登陆页面中密码填写怎么去掉缓存，这里我是在网上查的方法：

3:在项目的权限控制时候用普通的初始化加载权限不能成功，例如（用 $(function() {}）去加载权限逻辑代码，发现不行）：

　　这里需要了解的是为什么会在页面列表页中，显示加载$(function() {}）方法，之后在加载列表，怎么把逻辑调换位置（先加载页面列表在加载初始化权限方法）直接上代码，

table.render({
elem : '#test',
url : url,
page : true,
cols : [ [
{
field : 'name',
minWidth : 100,
title : '字段一',
sort : true
}
, {
field : '',
fixed : 'right',
width : 90,
align : "center",
toolbar : '#barDemo',
title : '操作'
}
] ],

//在表格加载完毕后执行的权限方法初始化==========
done: function (res, curr, count) {

}

});

主要就是：

done: function (res, curr, count) {}这个方法里面执行权限逻辑，因为这个方法是在加载完列表之后，才执行的方法。

4：table列表中怎么显示单选按钮的状态修改，例如：

点击这个状态下的按钮可以动态修改列表某个状态字段，直接上代码：

<script type="text/html" id="switchTpl">
  <input type="checkbox"  value={{d.demo}} name="isDel" lay-skin="switch" lay-text="启用|停用" lay-filter="ztDemo" {{ d.isDel == 0 ? 'checked' : '' }}>
</script>



{
field : 'isDel',
width : 100,
title : '状态',
templet : '#switchTpl',
unresize : true
}



            //监听是否启用操作（要写在 layui初始化方法里面）
        form.on('switch(sexDemo)', function(obj) {
            //修改后台是否启用字段
            $.ajax({
                url : url,
                data : {
                    aaa: this.value,
                    status : obj.elem.checked + ''
                },
                type : "Post",
                dataType : "json",
                success : function(data) {
                    
                },
                error : function(data) {
                    $.messager.alert('错误', data.msg);
                }
            });
            if (!obj.elem.checked) {
                layer.tips('当前状态' + this.value + '已停用', obj.othis);
            } else {
                layer.tips('当前状态' + this.value + '已启用', obj.othis);
            }

        });

5：列表中初始化之后，怎么通过条件查询显示列表

代码:

//执行重载(按条件查找数据列表)
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
storeNo : storeNo,
storePrincipal : storePrincipal,
}
},'data');

其中：lay-filter="test" 这个是 table表格中的一个属性，要与 table.reload('test', {}）中的 test要一致

因为是重新加载列表所以要从第一页开始，所以一般都是固定 curr: 1

where 里面是条件根据自己的需求添加

6：怎么在列表中添加：查看，编辑，删除等按钮，直接上代码

{
field : '',
fixed : 'right',
width : 90,
align : "center",
toolbar : '#barDemo',
title : '操作'
}

//监听工具条
table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if (layEvent === 'detail') { //查看
detail(data);
} else if (layEvent === 'edit') { //编辑
edit(data);
} else if (layEvent === 'del') { //删除
del(data);
}
});

7：关于页面之间的传值和接受值，直接上代码

例如：父页面传值：

var index = layer.open({
type : 2,
title : '添加',
id : 'detail',
shadeClose : false,
shade : 0.4,
maxmin : true, //开启最大化最小化按钮
area : [ w + 'px', h + 'px' ],
fix : false, //不固定
scrollbar : false, //屏蔽滚动条
content : 'xxx.html?type=2',
});

子页面接收：

//获取页面传值
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}

$(function() {

var type= getQueryVariable("type");//接收父页面的参数

})

8：怎么给添加页面中每个必填字段前面，加上‘*’，上代码

//这个是 css样式，直接复制就行

.Required:after {
content: "*";
color: red;
position: absolute;
top: 16px;
left: 6px;
}

然后在每个必填字段前面的元素上面添加一个 class 名字是：class="Required"，就可以了。

9：在添加页面中的字段验证中，发现layui的验证必须是不能空，根据个人需求，现在是有一个字段当它为空（就是不填写数据）时候不进行验证，当他不为空（填写数据）时候在验证，例如电话号码，如果按找layui的来说只要是手机验证都要填写，所以不符合我的需求，我把验证的源码进行了修改，上代码

　　1首先要找到：/layui/lay/modules/form.js 这个文件。

　　2主要的修改是，对应的正则表达式"/"后面加上‘(^$)|’即可。例如：

　　　　phone:[/(^$)|^1\d{10}$/,"请输入正确的手机号"]

　　　email:[/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,"邮箱格式不正确"]

　　　url:[/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/,"链接格式不正确"]

10：在项目退出账号的时候需要 清空 右边的所有的tab的内容，如何让清空，上代码：

　　其实在xadmin里面就有这个方法，我只不过是把代码找出来了，xadmin.js里面有个方法叫：$('#tab_right').on('click', 'dd', function(event) {}。

//在关闭用户的同事需要把所有右侧打开的tab全部关闭，放到退出登录方法里面即可
$('.layui-tab-title li[lay-id]').find('.layui-tab-close').click();
$('#tab_right').hide();
$('#tab_show').hide();

11：为了方便在查看页面也编辑页面的回显数据，自己写了一个 js ，代码如下：

//自动赋值
function automaticAssignment(data) {
$('#table td').each(function(i) { // 遍历 td
var ids = $(this).attr("id");
$(this).text(data[ids]);
});
}

当前页面如果是，查看页面时候我用的全部是 id属性，当是编辑页面时候我用的都是 name属性，根据自己情况可以自行修改。

这些仅仅是我自己写代码时候的记录，有什么更好的方法或者有什么错误欢迎提出来，谢谢。

posted on 2020-09-02 11:39 songyinan 阅读(1527) 评论(0) 编辑收藏举报

刷新页面返回顶部

关于 X-admin 框架应用时候遇到的问题记录

songyinan

公告

导航