Jquery中LigerUi的彈出編輯框(實(shí)現(xiàn)方法)
一、載入
<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('請(qǐng)選擇行!'); return }
addbill(selected, false, '查看記錄', true);
break;
case "modify":
var selected = grid.getSelected();
if (!selected) { LG.tip('請(qǐng)選擇行!'); return }
addbill(selected, false, '修改記錄', false);
break;
case "delete":
jQuery.ligerDialog.confirm('確定刪除嗎?', function (confirm) {
if (confirm)
f_delete();
});
break;
}
}
四、在函數(shù)下面,添加彈出框樣式代碼
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
{
// 放入彈出窗口樣式內(nèi)容
}
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);
}
}
五、彈出窗口樣式中的內(nèi)容
var mainform = $("#EditForm");
mainform.ligerForm({
inputWidth: 150,
fields:
[
{ name: "ProId1", type: "hidden" }, // 隱藏字段,為彈出選擇編號(hào)保存值
{ display: "倉(cāng)庫(kù)", name: "Daihao1", newline: true, labelWidth: 100, width: 150, space: 30, type: "text", validate: { required: true, digits: true} },
{ display: "商品名稱(chēng)", 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: "生產(chǎn)日期", 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(); } }
]
});
六、保存事件
- EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼
- Javascript 自適應(yīng)高度的Tab選項(xiàng)卡
- jQuery LigerUI 插件介紹及使用之ligerDrag和ligerResizable示例代碼打包
- jQuery LigerUI 使用教程入門(mén)篇
- jQuery LigerUI 使用教程表格篇(1)
- Jquery顯示和隱藏元素或設(shè)為只讀(含Ligerui的控件禁用,實(shí)例說(shuō)明介紹)
- 淺析LigerUi開(kāi)發(fā)中謹(jǐn)慎載入common.css文件
- 解析Jquery的LigerUI如何實(shí)現(xiàn)文件上傳
- js style動(dòng)態(tài)設(shè)置table高度
- 如何解決ligerUI布局時(shí)Center中的Tab高度大小
相關(guān)文章
使用Easyui實(shí)現(xiàn)查詢(xún)條件的后端傳遞并自動(dòng)刷新表格的兩種方法
這篇文章主要介紹了使用Easyui實(shí)現(xiàn)查詢(xún)條件的后端傳遞并自動(dòng)刷新表格的兩種方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09jQuery實(shí)現(xiàn)table表格信息的展開(kāi)和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)table表格信息的展開(kāi)和縮小功能,涉及jQuery事件響應(yīng)及頁(yè)面元素遍歷、屬性修改相關(guān)操作技巧,需要的朋友可以參考下2018-07-07jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法實(shí)例分析
這篇文章主要介紹了jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法,較為詳細(xì)的分析了jquery導(dǎo)航插件的原理及具體使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jQuery EasyUI 選項(xiàng)卡面板tabs的使用實(shí)例講解
下面小編就為大家分享一篇jQuery EasyUI 選項(xiàng)卡面板tabs的使用實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12jquery+正則實(shí)現(xiàn)統(tǒng)一的表單驗(yàn)證
表單驗(yàn)證一直很繁瑣,特別是大點(diǎn)的表單,如果每個(gè)input都去單獨(dú)寫(xiě)驗(yàn)證簡(jiǎn)直要寫(xiě)死人,最近寫(xiě)了一小段js統(tǒng)一的驗(yàn)證表單內(nèi)容是否正確。需要的朋友可以參考下2015-09-09