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
. 代码如下:
<p id="editdetail" style="display:none;"><form id="editform" method="post"></form> </p> <%--弹出编辑框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);
$("#bottlenum").val(currentdata.bottlenum);
$("#bumpany2").val(currentdata.buycompanyname);
$("#buycoy1").val(currentdata.buycompanyid);
$("#vayid2").val(currentdata.varietyname);
$("#varid1").val(currentdata.varietyid);
$("#handate").val(currentdata.handdate);
$("#fact2").val(currentdata.factoryname);
$("#fact1").val(currentdata.factoryid);
$("#froce2").val(currentdata.fromplacename);
$("#froce1").val(currentdata.fromplaceid);
}
}
五、弹出窗口样式中的内容
. 代码如下:
var mainform = $("#editform");
mainform.ligerform({
inputwidth: 150,
fields:
[
{ name: "proid1", type: "hidden" }, // 隐藏字段,为弹出选择编号保存值
{ display: "仓库", name: "daihao1", newline: true, labelwidth: 100, width: 150, space: 30, type: "text", validate: { required: true, digits: true} },
{ display: "商品名称", name: "proid", comboboxname: "proid2", newline: false, labelwidth: 100, width: 150, space: 30, type: "select", option: {} }, // 弹出选择框
{ display: "单位", name: "degreeid", comboboxname: "degreeid2", newline: false, labelwidth: 100, width: 150, space: 30, type: "select", options: { valuefieldid: "degreeid1", treeleafonly: false, tree: { url: "../handle/se1.ashx?ajaxaction=getgree", checkbox: false}} },
{ display: "生产日期", name: "madedate1", newline: true, labelwidth: 100, width: 150, space: 30, type: "date", validate: { required: true} },
{ display: "备注", name: "mark", newline: false, labelwidth: 100, width: 150, space: 30, type: "text", validate: { required: true, digits: true} }
],
tojson: json2.stringify
});
$.metadata.settype("attr", "validate");
lg.validate(mainform, { debug: true });
$("#handdate").val(currentdate);
$("#bonum").val("0");
$.ligerui.get("proid2").set('onbeforeopen', f_selectcoct)
$.ligerui.get("faory2").set('onbeforeopen', f_selectfary_1)
$.ligerui.get("buyany2").set('onbeforeopen', f_selectfary_2)
$.ligerui.get("froce2").set('onbeforeopen', f_selectfroace)
detailwin = $.ligerdialog.open({
target: $("#editdetail"),
width: 595, height: 460, top: 80, title: "添加保存修改窗口", //240
buttons: [
{ text: '保存', onclick: function () { save(); } },
{ text: '取消', onclick: function () { detailwin.hide(); } }
]
});
六、保存事件
下一篇: 羌族历史发展:关于羌族民间传说故事有哪些
推荐阅读
-
React中jquery引用的实现方法
-
分析了一下JQuery中的extend方法实现原理_jquery
-
Jquery中LigerUi的弹出编辑框(实现方法)_jquery
-
EasyUI实现第二层弹出框的方法_jquery
-
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析_jquery
-
解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法
-
解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法
-
在vue中实现点击选择框阻止弹出层消失的方法
-
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
-
原生js实现复制对象、扩展对象 类似jquery中的extend()方法教程