本篇文章是对Jquery中LigerUi的弹出编辑框的实现方法进行了分析介绍,需要的朋友可以参考下
一、载入
复制代码 代码如下:
<link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="../lib/ligerUI/js/plugins/ligerForm.js" type="text/javascript"></script>
<script src="../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<link href="../lib/css/common.css" rel="stylesheet" type="text/css" />
<script src="../lib/js/common.js" type="text/javascript"></script>
<script src="../lib/js/LG.js" type="text/javascript"></script>
<script src="../lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
<script src="../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
<script src="../lib/jquery-validation/messages_cn.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
<script src="../../lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
二、Html
复制代码 代码如下:
<div id="Editdetail" style="display:none;"><form id="EditForm" method="post"></form> </div> <%--弹出编辑框DIV--%>
三、在Add中添加事件
复制代码 代码如下:
//工具条事件
function toolbarBtnItemClick(item) {
switch (item.id) {
case "add":
addbill({}, true, '添加记录', false);
break;
case "view":
var selected = grid.getSelected();
if (!selected) { LG.tip('请选择行!'); return }
addbill(selected, false, '查看记录', true);
break;
case "modify":
var selected = grid.getSelected();
if (!selected) { LG.tip('请选择行!'); return }
addbill(selected, false, '修改记录', false);
break;
case "delete":
jQuery.ligerDialog.confirm('确定删除吗?', function (confirm) {
if (confirm)
f_delete();
});
break;
}
}
四、在函数下面,添加弹出框样式代码
复制代码 代码如下:
var detailWin = null, currentData = null, currentIsAddNew, currentIsView;
function addbill(data, isAddNew, t, isview) {
currentData = data;
currentIsAddNew = isAddNew;
currentIsView = isview;
if (detailWin) {
detailWin.set('title', t);
detailWin.show();
}
else
{
// 放入弹出窗口样式内容
}
if (!isAddNew) {
// public int LrId { get; set; }
$("#ProtId2").val(currentData.ProductName);
$("#ProId1").val(currentData.ProductId);
$("#ForId2").val(currentData.FormatName);
$("#Foad1").val(currentData.FormatId);
$("#Ded2").val(currentData.DegreeName);
$("#Degrd1").val(currentData.DegreeId);
$("#Appl").val(currentData.AppendBill);
$("#Bum").val(currentData.BoxNum);
$("#Maate").val(currentData.MadeDate);
&nb