ligerui的popupedit怎么用

一、载入

复制代码代码如下:

<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> <%--d出编辑框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

}

}

四、在函数下面，添加d出框样式代码

复制代码代码如下:

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

{

// 放入d出窗口样式内容

}

if (!isAddNew) {

// public int LrId { getset}

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

}

}

五、d出窗口样式中的内容

复制代码代码如下:

var mainform = $("#EditForm")

mainform.ligerForm({

inputWidth: 150,

fields:

[

{ name: "ProId1", type: "hidden" }, // 隐藏字段，为d出选择编号保存值

{ 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: {} }, // d出选择框

{ 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()} }

]

})

六、保存事件

可以先给div标签设置id，然后给这个id绑定点击事件。

1、新建html文档，在body标签中添加一个div标签，为div标签设置一个id，这里以“demo”为例：

2、在head标签中引入jquery的js文件，这时可以使用cdn链接：

3、添加script标签，在script标签中绑定“demo”，然后使用click函数为div标签绑定点击事件：

具体回答就是在div上写ng-click="cbClick()"这样的方式来实现.angular框架推崇的是声明式ui,所以基本上回调事件写在html元素上比较符合约定,或者你也可以把事件封装到指令中. 用angular的话,最好不要考虑jquery的思路来做程序,最好的方式就是考虑下angular特有的方式,比如双向数据绑定,控制器,指令来完成这类型的功能,不要去考虑细节怎么实现的,要从抽象的层面去实现,不然angular能做的,jquery也能做,不要把一个angular程序写出jquery

---