Jquery中LigerUi的弹出编辑框(实现方法)_Javascript教程-查字典教程网
Jquery中LigerUi的弹出编辑框(实现方法)
Jquery中LigerUi的弹出编辑框(实现方法)
发布时间:2016-12-30 来源:查字典编辑
摘要:一、载入复制代码代码如下:二、Html复制代码代码如下:三、在Add中添加事件复制代码代码如下://工具条事件functiontoolbar...

一、载入

复制代码 代码如下:

<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"><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);

$("#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(); } }

]

});

六、保存事件

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类