当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Jquery中LigerUi的弹出编辑框(实现方法)

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

2018年11月01日  | 移动技术网IT编程  | 我要评论

杨岳跳楼,非你莫属吉他谱,osp

一、载入

. 代码如下:


    <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

. 代码如下:


<p id="editdetail" style="display:none;"><form id="editform" method="post"></form> </p>    <%--弹出编辑框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(); } }
                  ]
              });


六、保存事件

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网