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


Posted in Javascript onJuly 09, 2013

一、载入

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

六、保存事件
Javascript 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
浅析js中取绝对值的2种方法
Jul 09 #Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 #Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 #Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 #Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 #Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 #Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 #Javascript
You might like
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
NOT NULL 和NULL
2007/01/15 PHP
php图片验证码代码
2008/03/27 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php实现word转html的方法
2016/01/22 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python xpath获取页面注释的方法
2019/01/14 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python中怎么表示空值
2020/06/19 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
python绘制雷达图实例讲解
2021/01/03 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
商场端午节活动方案
2014/01/29 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
无房证明范本
2014/09/17 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
人事任命通知
2015/04/20 职场文书
工作收入证明范本
2015/06/12 职场文书
高三语文教学反思
2016/02/16 职场文书