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 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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
去除php注释和去除空格函数分享
2014/03/13 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python基础之函数用法实例详解
2014/09/10 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Python的Django框架安装全攻略
2015/07/15 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
运动会口号大全
2014/06/07 职场文书
电子专业求职信
2014/06/19 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python