[原创]LayerUI使用过程问题经验总结-填坑笔记

LayUI开发过程中的填坑儿记

• form中添加任意button标签，总是点击提交form的问题：

在formclass=”layui-form”

表单增加一个button后，不管在哪个input里按回车都会触发button的click事件

问题描述,同命相怜http://fly.layui.com/jie/21649/

解决方法：

<button type=”button”class=”layui-btn layui-bg-blue” onclick=”alert();”>

Button按钮的事件响应添加方法：

<xblock class=”actions”>

<button type=”button” class=”layui-btn layui-bg-blue”data-type=”add”><i class=”layui-icon”>&#xe608;</i> 新增一行</button>

</xblock>

Js事件绑定代码:

layui.use([‘table’, ‘form’, ‘laydate’,’element’,’layer’], function () {

$ = layui.JQuery;

var form = layui.form

,table = layui.table

,laydate = layui.laydate; //弹出层;

//数据处理

var $ = layui.$, active = {

change: function () { //编辑

var checkStatus = table.checkStatus(‘datatable’)

, data = checkStatus.data;

if (data.length > 0) {

console.log(data[0].i_cd_identifier);

add(‘编辑’, ‘/BuyOrder/Edit?id=’ + data[0].identifier, ‘458’, ‘510’);

}

}

, del: function () { //获取选中数目

var checkStatus = table.checkStatus(‘datatable’)

, data = checkStatus.data;

console.log(JSON.stringify(data));

layer.confirm(‘确认要删除吗？’, function (index) {

//捉到所有被选中的，发异步进行删除

$.post(‘/BuyOrder/Remove’, { data: JSON.stringify(data) }, function (result) {

if (result.status) {

layer.alert(“删除成功”, { icon: 6 });

table.reload(“datatable”, { url: ‘/BuyOrder/getEntity’ });

} else {

layer.alert(result.message);

}

}, ‘json’);

});

}

, add: function () { //验证是否全选

var value = $(this).data(‘value’);

console.log(value);

add(‘添加’, ‘/BuyGoods/Edit?ordercode=<%=ViewData[“OrderCode”] %>’,’458′,’510′);

}

, reload: function () {

var keywords = $(‘#keywords’);

//执行重载

table.reload(‘datatable’, {

page: {

curr: 1 //重新从第 1 页开始

}

, where: {

key: {

nvc_name: keywords.val()

}

}

});

}

};

$(‘.actions .layui-btn’).on(‘click’, function () {

var type = $(this).data(‘type’);

active[type] ? active[type].call(this) : ”;

});

//监听提交

form.on(‘submit(addGoods)’, function (data) {

console.log(data);

publish(‘/Supplier/save’, data);

return false;

});

form.on(‘submit(add)’, function (data) {

console.log(data);

publish(‘/Supplier/save’, data);

return false;

});

form.on(‘submit(cancel)’, function (data) {

// 获得frame索引

var index = parent.layer.getFrameIndex(window.name);

//关闭当前frame

parent.layer.close(index);

return false;

});

});

• 弹出layer保存数据后，更新parent的table的坑

效果如图：

弹出窗口保存方法，调取parent调取table的reload方法：

function publish(url, data) {

$.post(url, { data: JSON.stringify(data.field) }, function (result) {

if (result.status) {

layer.alert(“保存成功”, { icon: 6 }, function () {

// 获得frame索引

var index = parent.layer.getFrameIndex(window.name);

//关闭当前frame

parent.layer.close(index);

//parent.window.reloadtable();

parent.layui.table.reload(‘datatable’,{page:{curr:1}});

//parent.window.location = parent.window.location;

});

} else {

layer.alert(result.message);

}

}, ‘json’);

}

• Select选中的事件，获取选中的选项的值，而不是option的value

1.Select的Html代码要加入lay-filter=”你的select标示”

2.然后layui.use([‘form’, ‘layer’], function () {

form.on(‘select(i_gi_identifier)’, function (data) {

var goods=$(“#i_gi_identifier”).find(“option:selected”);

$(‘#nvc_goods’).val($(goods).html());

$(‘#nvc_goods_model’).val($(goods).data(“model”));

$(‘#nvc_goods_num’).val($(goods).data(“num”));

});

});

• Table表格每行增加操作按钮

效果如下：

代码如下：

首先加入一组html,放到table标签下面，代码如下

<table class=”layui-hide” id=”LAY_table_user” lay-filter=”useruv”></table><script type=”text/html” id=”barDemo”><a class=”layui-btn layui-btn-primary layui-btn-mini” lay-event=”detail”>查看</a><a class=”layui-btn layui-btn-mini” lay-event=”edit”>编辑</a><a class=”layui-btn layui-btn-danger layui-btn-mini” lay-event=”del”>删除</a></script>

然后在js中指定工具条

//方法级渲染        table.render({            elem: ‘#LAY_table_user’            ,url: ‘UVServlet’            ,cols: [[                {checkbox: true, fixed: true}                ,{field:’id’, title: ‘ID’, width:80, sort: true, fixed: true}                ,{field:’aid’, title: ‘商户’, width:80, sort: true}                ,{field:’uv’, title: ‘访问量’, width:80, sort: true,edit:true}                ,{field:’date’, title: ‘日期’, width:180}                ,{field:’datatype’, title: ‘日期类型’, width:100} ,{field:’right’, title: ‘操作’, width:177,toolbar:”#barDemo”}            ]]            ,id: ‘testReload’            ,page: true            ,height: 600        });

• 可输入的下拉选择框Select

<selectid=”i_gi_identifier”name=”i_gi_identifier”lay-filter=”i_gi_identifier”lay-search=””>

<%=ViewData[“Goods”] %>

</select>

• 下拉选择框SELECT的级联选中事件处理：

标签：

<divclass=”layui-form-item”>

<labelfor=”L_username”class=”layui-form-label”>适用车型 </label>

<divclass=”layui-input-inline”>

<selectname=”i_cb_identifier”id=”i_cb_identifier”requiredlay-filter=”carbrand”lay-search=””>

<optionvalue=””>请选择</option>

<%=ViewData[“Carbrands”]%>

</select>

</div>

<divclass=”layui-input-inline”>

<selectid=”i_cd_identifier”name=”i_cd_identifier”requiredlay-filter=”cardepartment”lay-search=””>

<optionvalue=””>请选择</option>

<%=ViewData[“CarDept”]%>

</select>

</div>

<divclass=”layui-input-inline”>

<selectname=”i_cm_identifier”id=”i_cm_identifier”lay-filter=”carmodel”lay-search=””>

<optionvalue=””>请选择</option>

<%=ViewData[“CarModel”]%>

</select>

</div>

</div>

初始化脚本：

layui.use([‘form’, ‘layer’], function () {

form.on(‘select(carmodel)’, function (data) {

$(‘#nvc_carmodel’).val($(“#i_cm_identifier”).find(“option:selected”).html());

var carbrand = $(“#i_cb_identifier”).find(“option:selected”).html();

var cardepart = $(“#i_cd_identifier”).find(“option:selected”).html();

var carmodel = $(“#i_cm_identifier”).find(“option:selected”).html();

var carbrandid = $(‘#i_cb_identifier’).val();

var cardepartid = $(‘#i_cd_identifier’).val();

var carmodelid = $(‘#i_cm_identifier’).val();

var duplit = false;

if (carmodelid == “”) {

return false;

}

$(‘.z_goods_car’).each(function (index, val) {

var car_modelid = $(this).attr(‘data-modelid’);

//console.log(‘cc:’ + car_modelid + ‘nn:’ + carmodelid);

if (carmodelid == car_modelid) {

//console.log(‘bb’);

duplit = true;

return false;

}

else {

duplit = false;

}

});

//取车系

form.on(‘select(carbrand)’, function (data) {

console.log(data);

console.log(data.value);

$(‘#nvc_carbrand’).val($(“#i_cb_identifier”).find(“option:selected”).html());

$.post(‘/CarDepartment/getCardepartment’, { id: data.value }, function (result) {

console.log(result);

if (result.status) {

var ls = result.data;

console.log(ls.length);

$(“#i_cd_identifier”).empty();

$(“#i_cm_identifier”).empty();

$(‘#i_cd_identifier’).append(“<option value=”>请选择</option>”);

$.each(ls, function (index, val) {

$(‘#i_cd_identifier’).append(“<option value='” + val.i_cd_identifier + “‘>” + val.nvc_name + “</option>”);

});

form.render()

}

}, ‘json’);

});

//取车型

form.on(‘select(cardepartment)’, function (data) {

console.log(data.value);

$(‘#nvc_cardepart’).val($(“#i_cd_identifier”).find(“option:selected”).html());

$(“#i_cm_identifier”).empty();

$.post(‘/CarModel/getCarmodel’, { id: data.value }, function (result) {

console.log(result);

if (result.status) {

var ls = result.data;

console.log(‘count:’ + ls.length);

$(“#i_cm_identifier”).empty();

$(‘#i_cm_identifier’).append(“<option value=”>请选择</option>”);

$.each(ls, function (index, val) {

$(‘#i_cm_identifier’).append(“<option value='” + val.i_cm_identifier + “‘>” + val.nvc_name + “</option>”);

});

form.render()

}

}, ‘json’);

});

}

• 顶部搜索输入条件，点击搜索按钮，页面刷新两次的问题：

问题原因：由于搜索条件和按钮嵌套在form标签内，搜索用的table的reload方法搜索加载数据的，先异步按条件reload表格的数据，然后form就又提交了一次，结果造成搜索不到数据的假象。

解决办法：

1. 将搜索按钮放在form标签外卖，这样顶部的搜索条和按钮容易错位，不美观（不推荐）
2. 在form标签加入onSubmit=”return false;”（推荐），这样就不会提交form了
3. 还有的说加载reload事件响应function后面加return false;但是加了没起作用，建议还是用第二种方法。

• X-Admin的弹出窗口，关闭事件提示并处理函数添加

问题：需要在x_admin_show()函数中，对右上角的关闭按钮点击事件，加入提示

解决问题：1.修改E:\mulan\Mulan\Mulan\Mulan\Content\js\xadmin.js的增加了cancel事件处理函数：

layer.open({

type: 2,

area: [w+’px’, h +’px’],

fix: false, //不固定

maxmin: true,

shadeClose: true,

shade:0.4,

title: title,

content: url,

cancel: function (index, layero) {

var pindex=index;

layer.confirm(‘确定要关闭么’, {icon: 3, title:’提示’}, function(index){

layer.close(index);

layer.close(pindex);

});

return false;

}

});

• table的列中编辑数量，计算吨数更新行缓存数据

需求：

实现：

• 列可编辑设置

, { field: ‘Sell_Number’, title: ‘订货数量’,edit:’text’,fixed: ‘right’ }

, { field: ‘WeighNum’, title: ‘订货吨数’ ,fixed: ‘right’}

, { field: ‘Sell_OrderCode’,title: ‘操作’,templet:’#buy’,fixed: ‘right’,toolbar: ‘#barDemo’ }

• 监听列编辑事件，计算订货吨数更新行的列

//监听工具条

table.on(‘tool(datalist)’, function(obj){

var data = obj.data;

if(obj.event === ‘edit’){

layer.alert(‘编辑行：<br>’+ JSON.stringify(data))

}

});

//监听单元格编辑

table.on(‘edit(datalist)’, function(obj){

var val = obj.value //得到修改后的值

,data = obj.data //得到所在行所有键值

,field = obj.field; //得到字段

if(data.iCanNum*1>val){                                             var weightnum=val*data.kgNum*1;

data.WeighNum=weightnum;

//layer.msg(data.WeighNum);

obj.update({

WeighNum: weightnum

});

layer.confirm(‘添加到订货单?’, function(index){

//do something

layer.close(index);

$.post(‘/SellOrderList/Save’,{data:JSON.stringify(data)},function(result){

if (result.status) {

layer.alert(“添加成功”, { icon: 6 });

}else{

layer.alert(result.message);

}

});

});

}else{

layer.alert(‘可用库存不足!’);

obj.update({

Sell_Number: 0

});

}

});

• 提示是否添加到订货清单，异步提交保存到订货清单