Jquery中LigerUi的彈出編輯框(實現方法)

本篇文章是對Jquery中LigerUi的彈出編輯框的實現方法進行了分析介紹需要的朋友可以參考下  

　　一載入

復制代碼 代碼如下:
    <link href="/lib/ligerUI/skins/Aqua/css/ligeruiallcss" rel="stylesheet" type="text/css" />
    <script src="/lib/jquery/jqueryminjs" type="text/javascript"></script>
    <script src="/lib/ligerUI/js/ligeruiminjs" type="text/javascript"></script>  
    <script src="/lib/ligerUI/js/plugins/ligerFormjs" type="text/javascript"></script>
    <script src="/lib/ligerUI/js/plugins/ligerGridjs" type="text/javascript"></script>
    <link href="/lib/css/commoncss" rel="stylesheet" type="text/css" /> 
    <script src="/lib/js/commonjs" type="text/javascript"></script>  
    <script src="/lib/js/LGjs" type="text/javascript"></script>
    <script src="/lib/jqueryvalidation/jqueryvalidateminjs" type="text/javascript"></script>
    <script src="/lib/jqueryvalidation/jquerymetadatajs" type="text/javascript"></script>
    <script src="/lib/jqueryvalidation/messages_cnjs" type="text/javascript"></script>
    <script src="/lib/js/ligeruiexpandjs" type="text/javascript"></script>
    <script src="//lib/ligerUI/js/plugins/ligerDateEditorjs" type="text/javascript"></script>

　　
二Html

復制代碼 代碼如下:
<div id="Editdetail" style="display:none;"><form id="EditForm" method="post"></form> </div>    <%彈出編輯框DIV%>

　　
三在Add中添加事件

復制代碼 代碼如下:
      //工具條事件
      function toolbarBtnItemClick(item) {
          switch (itemid) {
              case "add":
                  addbill({} true 添加記錄 false);
                  break;
              case "view":
                  var selected = gridgetSelected();
                  if (!selected) { LGtip(請選擇行!); return }
                  addbill(selected false 查看記錄 true);
                  break;
              case "modify":
                  var selected = gridgetSelected();
                  if (!selected) { LGtip(請選擇行!); return }
                  addbill(selected false 修改記錄 false);
                  break;
              case "delete":
                  jQueryligerDialogconfirm(確定刪除嗎? 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) {
              detailWinset(title t);
              detailWinshow();
          }
          else
          {
            // 放入彈出窗口樣式內容
          }
          if (!isAddNew) {
              // public int LrId { get; set; }
              $("#ProtId")val(currentDataProductName);
              $("#ProId")val(currentDataProductId);
              $("#ForId")val(currentDataFormatName);
              $("#Foad")val(currentDataFormatId);
              $("#Ded")val(currentDataDegreeName);
              $("#Degrd")val(currentDataDegreeId);
              $("#Appl")val(currentDataAppendBill);
              $("#Bum")val(currentDataBoxNum);
              $("#Maate")val(currentDataMadeDate);
              $("#BottleNum")val(currentDataBottleNum);
              $("#Bumpany")val(currentDataBuyCompanyName);
              $("#BuyCoy")val(currentDataBuyCompanyId);
              $("#VayId")val(currentDataVarietyName);
              $("#VarId")val(currentDataVarietyId);
              $("#Handate")val(currentDataHandDate);
              $("#Fact")val(currentDataFactoryName);
              $("#Fact")val(currentDataFactoryId);
              $("#Froce")val(currentDataFromPlaceName);
              $("#Froce")val(currentDataFromPlaceId);
          }
      }

　　
五彈出窗口樣式中的內容

復制代碼 代碼如下:
              var mainform = $("#EditForm");
              mainformligerForm({
                  inputWidth:
                  fields:
                  [
                     { name: "ProId" type: "hidden" }  // 隱藏字段為彈出選擇編號保存值
                     { display: "倉庫" name: "Daihao" newline: true labelWidth: width: space: type: "text" validate: { required: true digits: true} }
                     { display: "商品名稱" name: "ProId" comboboxName: "ProId" newline: false labelWidth: width: space: type: "select" option: {} }   // 彈出選擇框
                    { display: "單位" name: "DegreeId" comboboxName: "DegreeId" newline: false labelWidth: width: space: type: "select" options: { valueFieldID: "DegreeId" treeLeafOnly: false tree: { url: "/handle/seashx?ajaxaction=Getgree" checkbox: false}} }
                    { display: "生產日期" name: "MadeDate" newline: true labelWidth: width: space: type: "date" validate: { required: true} }
                    { display: "備注" name: "mark" newline: false labelWidth: width: space: type: "text" validate: { required: true digits: true} }
         ]
                  toJSON: JSONstringify
              });
              $metadatasetType("attr" "validate");
              LGvalidate(mainform { debug: true });
              $("#HandDate")val(currentdate);
              $("#BoNum")val("");
              $ligeruiget("ProId")set(onBeforeOpen f_selectCoct)
              $ligeruiget("Faory")set(onBeforeOpen f_selectFary_)
              $ligeruiget("Buyany")set(onBeforeOpen f_selectFary_)
              $ligeruiget("Froce")set(onBeforeOpen f_selectFroace)
              detailWin = $ligerDialogopen({
                  target: $("#Editdetail")
                  width: height: top: title: "添加保存修改窗口" //
                  buttons: [
                  { text: 保存 onclick: function () { save(); } }
                  { text: 取消 onclick: function () { detailWinhide(); } }
                  ]
              });

　　
六保存事件

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20226.html