在jQuery中如何使用EasyUI window窗口

本文通过实例代码给大家介绍了jquery easyui window窗口使用功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下

需求:点击【增加】按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示。

在jQuery中如何使用EasyUI window窗口

nbsp;html>          管理取派员                                                      function doAdd(){        $('#addWindow').window("open");      }      function doEdit(){        alert("修改...");      }      function doDelete(){        alert("删除...");      }      function doRestore(){        alert("将取派员还原...");      }      //工具栏      var toolbar = [ {        id : 'button-add',         text : '增加',        iconCls : 'icon-add',        handler : doAdd      }, {        id : 'button-edit',        text : '修改',        iconCls : 'icon-edit',        handler : doEdit      }, {        id : 'button-delete',        text : '作废',        iconCls : 'icon-cancel',        handler : doDelete      },{        id : 'button-restore',        text : '还原',        iconCls : 'icon-save',        handler : doRestore      }];      // 定义列      var columns = [ [ {        field : 'id',        checkbox : true,      },{        field : 'courierNum',        title : '工号',        width : 80,        align : 'center'      },{        field : 'name',        title : '姓名',        width : 80,        align : 'center'      }, {        field : 'telephone',        title : '手机号',        width : 120,        align : 'center'      }, {        field : 'checkPwd',        title : '查台密码',        width : 120,        align : 'center'      }, {        field : 'pda',        title : 'PDA号',        width : 120,        align : 'center'      }, {        field : 'standard.name',        title : '取派标准',        width : 120,        align : 'center',        formatter : function(data,row, index){          if(row.standard != null){            return row.standard.name;          }          return "";        }      }, {        field : 'type',        title : '取派员类型',        width : 120,        align : 'center'      }, {        field : 'company',        title : '所属单位',        width : 200,        align : 'center'      }, {        field : 'deltag',        title : '是否作废',        width : 80,        align : 'center',        formatter : function(data,row, index){          if(data=="0"){            return "正常使用"          }else{            return "已作废";          }        }      }, {        field : 'vehicleType',        title : '车型',        width : 100,        align : 'center'      }, {        field : 'vehicleNum',        title : '车牌号',        width : 120,        align : 'center'      } ] ];      $(function(){        // 先将body隐藏,再显示,不会出现页面刷新效果        $("body").css({visibility:"visible"});        // 取派员信息表格        $('#grid').datagrid( {          iconCls : 'icon-forward',          fit : true,          border : false,          rownumbers : true,          striped : true,          pageList: [30,50,100],          pagination : true,          toolbar : toolbar,          url : "../../data/courier.json",          idField : 'id',          columns : columns,          onDblClickRow : doDblClickRow        });        // 添加取派员窗口        $('#addWindow').window({          title: '添加取派员',          width: 800,          modal: true,          shadow: true,          closed: true,          height: 400,          resizable:false        });        //对收派标准save按钮,添加点击事件        $("#save").click(function(){          //判断是否form中的所有表单对象都通过校验          if($("#standardForm").form('validate')){            //都通过校验            $("#standardForm").submit();          }else{            $.messager.alert("警告","表单存在非法内容,请重新填写","warning");          }          //关闭窗口          $("#addWindow").window('sclose');        });      });      function doDblClickRow(){        alert("双击表格数据...");      }            

      

登录后复制        

      

        

          保存        

            

        

                  

      

        

            

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在微信小程序中gallery slider组件的使用方法

在微信小程序中gallery slider组件的使用方法

在微信小程序中gallery slider组件的使用方法

在微信小程序中gallery slider组件的使用方法

在微信小程序中gallery slider组件的使用方法

以上就是在jQuery中如何使用EasyUI window窗口的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3184167.html

(0)
上一篇 2025年3月31日 21:36:10
下一篇 2025年3月31日 21:36:15

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详细讲解EasyUI中abs的使用

    下面我就为大家分享一篇jquery easyui 选项卡面板tabs的使用实例讲解,具有很好的参考价值,希望对大家有所帮助。 1、 对选项卡面板区域 p 设置 class=”easyui-tabs” 2、 对选项卡面板区域添加多个 p,每个…

    编程技术 2025年3月31日
    100
  • 在EasyUI中如何使用accordion

    下面我就为大家分享一篇jquery easyui 折叠面板accordion的使用实例,具有很好的参考价值,希望对大家有所帮助。 1、对折叠面板区域 p 设置 class=”easyui-accordion” 2、在区域添加多个 p, 每个…

    编程技术 2025年3月31日
    100
  • 在jQuery中如何使用Validate插件

    下面我就为大家分享一篇jquery validate插件ajax方式验证输入值的实例,具有很好的参考价值,希望对大家有所帮助。 项目中经常会遇到需要后台验证问题,如用户名、用户账号是否存在等。使用jQuery Validate插件可以使用r…

    编程技术 2025年3月31日
    100
  • 在jQuery中如何实现动态控制页面元素

    这篇文章主要介绍了jquery实现动态控制页面元素的方法,结合实例形式分析了jquery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下 本文实例讲述了jQuery实现动态控制页面元素的方法。分享给大家供大家参考,具体如下: 背…

    2025年3月31日
    100
  • 在jquery中如何实现自定义显示消息数量

    这篇文章主要为大家详细介绍了基于jquery自定义显示消息数量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了jquery自定义显示消息数量展示的具体代码,供大家参考,具体内容如下 根据需求简单的实现一个小功能控件,…

    编程技术 2025年3月31日
    100
  • 使用jquery如何实现侧边栏左右伸缩效果

    下面我就为大家分享一篇jquery实现侧边栏左右伸缩效果的示例,具有很好的参考价值,希望对大家有所帮助。 jquery实现点击侧边栏伸缩效果。点击收缩,侧边栏向左收缩,显示按钮显示;点击显示按钮,显示按钮向左收缩,侧边栏显示。 具体代码如下…

    2025年3月31日
    100
  • 在jQuery中如何实现弹窗下底部页面禁止滑动效果

    在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。下面通过本文给大家分享jquery实现弹窗下底部页面禁止滑动效果,需要的朋友参考下吧 在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。在没有特别要求的情况下,弹窗弹出后…

    编程技术 2025年3月31日
    100
  • 在jQuery中如何实现点击DIV触发点击CheckBox

    下面我就为大家分享一篇jquery实现点击p同时点击checkbox,并为p上背景色的实例,具有很好的参考价值,希望对大家有所帮助。 废话不多说,直接上代码吧 nbsp;html>    JqueryTest    $(documen…

    2025年3月31日
    100
  • 使用JQUERY如何实现多个AJAX请求

    下面小编就为大家分享一篇利用jquery实现多个ajax请求等待的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 前言通常,jQuery的函数ajax进行Ajax调用。函数ajax只能做一个Ajax调用。当Ajax调用…

    2025年3月31日 编程技术
    100
  • 有关jquery自动加载数据的方法

    下面我就为大家分享一篇jquery在启动页面时,自动加载数据的实例,具有很好的参考价值,希望对大家有所帮助。 其实,重要的就是这个方法: $(document).ready(function(){ } 登录后复制 具体的在jquery中: …

    编程技术 2025年3月31日
    100

发表回复

登录后才能评论