[原创]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

});

}

 

});

 

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

 

分享到:更多 ()