您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

本篇文章是对Jquery中LigerUi的弹出编辑框的实现方法进行了分析介绍,需要的朋友可以参考下  

一、载入

复制代码 代码如下:
    <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('请选择行!'); 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);
          &nb