Jquery中LigerUi的弹出编辑框(实现方法)

所属分类: 网络编程 / JavaScript 阅读数: 283
收藏 0 赞 0 分享

一、载入

复制代码 代码如下:

    <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> &nbsp; &nbsp;<%--弹出编辑框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(); } }
                  ]
              });

六、保存事件

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多