ligerui一个dialog弹div的简单例子
- 格式:docx
- 大小:41.63 KB
- 文档页数:3
ligerui一个dialog弹div的简单例子
原理:
• 为啥要弹div,因为iframe这种页面弹窗,多少涉及到内存泄漏,多次弹窗之后浏览器内存占用居高不下
• 弹div没啥技术要点,关闭事件是用hide()来隐藏,初始化div隐藏外面多套一层div来控制
• 这个例子的保存和删除都没有提交数据库,只是前台grid改写
• 弹窗div里面的文本框有用到非空验证
• 第二次之后打开dialog用show,避免重复创建liger对象
//-----------------------全局变量------------------------------
var grid=null;
var dlgedit=null;
var Validator = null;
var edittype=null;
var rowi=0;
$(function () {
//--------------------grid定义-------------------------------
grid=$("#maingrid").ligerGrid({
checkbox: true,
rownumbers:true,
toolbar: { items: [{ text: '新增',id:'add', icon:'add',click: itemclick}]},
columns:
[
{ display: '编号', name:'AREAID'},
{ display: '名称', name:'AREANAME'},
{ display: '操作', render:function(r,i) {return '编辑';}}
],
url: "/service/DataHandler.ashx?View=arealist",
usePager:false
});
//--------------------form验证-------------------------------
$.metadata.setType("attr", "validate");
Validator = $("form").validate({
debug: false,
errorPlacement: function (l, dom){dom.ligerTip({ content: l.html(), appendIdTo: l});},
success: function (l){l.ligerHideTip();}
});
$("form").ligerForm();
$("#pageloading").hide();
});
//-----------------------------toolbar 按钮事件----------------------------
function itemclick(item)
{
if(item.id)
{
switch (item.id)
case "add":edittype="add"; f_edit("add",0);return; }
}
}
//--------------------------保存事件,更新grid-------------------------------
function f_save()
{
$("form").append($(".l-dialog"));
if (!Validator.form()) return false;
if (edittype=="add")
grid.addRow({
AREAID : $("#txtid").val(),
AREANAME: $("#txtname").val()
});
else
{
var ss=grid.getRowObj(rowi);
grid.updateRow(ss,{
AREAID : $("#txtid").val(),
AREANAME: $("#txtname").val()
});
}
dlgedit.hide();
}
//-------------------------弹窗事件---------------------------------
function f_edit(type,rowindex)
{
if (type!="add")
{
$("#txtid").val(grid.getRow(rowindex).AREAID);
$("#txtname").val(grid.getRow(rowindex).AREANAME);
}
else
{
$("#txtid").val("");
$("#txtname").val("");
}
edittype=type;
rowi=rowindex;
if (dlgedit==null)
{
dlgedit=$.ligerDialog.open({
target:$("#divedit"),
buttons: [ { text: '保存', onclick: function (i, d) { f_save(); }},
{ text: '关闭', onclick: function (i, d) { $("input").ligerHideTip(); d.hide(); }}
]
});
$(".l-dialog-close").bind('mousedown',function() //dialog右上角的叉
{
$("input").ligerHideTip();
dlgedit.hide();
});
$(".l-dialog-title").bind('mousedown',function() //移动dialog时,隐藏tip
{
$("input").ligerHideTip();
});
}
else
{
dlgedit.show();
}