首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery EasyUI window窗口使用实例代码

Posted in jQuery onDecember 25, 2017

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

jQuery EasyUI window窗口使用实例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>管理取派员</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css" href="../../css/default.css">
    <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
    <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
      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("双击表格数据...");
      }
    </script>
  </head>
  <body class="easyui-layout" style="visibility:hidden;">
    <div region="center" border="false">
      <table id="grid"></table>
    </div>
    <div class="easyui-window" title="对收派员进行添加或者修改" id="addWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
      <div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
        <div class="datagrid-toolbar">
          <a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
        </div>
      </div>
      <div region="center" style="overflow:auto;padding:5px;" border="false">
        <form id="standardForm" action="../../standard_save.action" method="post">
          <table class="table-edit" width="80%" align="center">
            <tr class="title">
              <td colspan="4">收派员信息</td>
            </tr>
            <tr>
              <td>快递员工号</td>
              <td>
                <input type="text" name="courierNum" class="easyui-validatebox" required="true" />
              </td>
              <td>姓名</td>
              <td>
                <input type="text" name="name" class="easyui-validatebox" required="true" />
              </td>
            </tr>
            <tr>
              <td>手机</td>
              <td>
                <input type="text" name="telephone" class="easyui-validatebox" required="true" />
              </td>
              <td>所属单位</td>
              <td>
                <input type="text" name="company" class="easyui-validatebox" required="true" />
              </td>
            </tr>
            <tr>
              <td>查台密码</td>
              <td>
                <input type="text" name="checkPwd" class="easyui-validatebox" required="true" />
              </td>
              <td>PDA号码</td>
              <td>
                <input type="text" name="pda" class="easyui-validatebox" required="true" />
              </td>
            </tr>
            <tr>
              <td>快递员类型</td>
              <td>
                <input type="text" name="type" class="easyui-validatebox" required="true" />
              </td>
              <td>取派标准</td>
              <td>
                <input type="text" name="standard.id" 
                    class="easyui-combobox" 
                    data-options="required:true,valueField:'id',textField:'name',
                      url:'../../standard_findAll.action'"/>
              </td>
            </tr>
            <tr>
              <td>车型</td>
              <td>
                <input type="text" name="vehicleType" class="easyui-validatebox" required="true" />
              </td>
              <td>车牌号</td>
              <td>
                <input type="text" name="vehicleNum" class="easyui-validatebox" required="true" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <!-- 查询快递员-->
    <div class="easyui-window" title="查询快递员窗口" closed="true" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; top:40px;left:200px">
      <div style="overflow:auto;padding:5px;" border="false">
        <form id="searchForm">
          <table class="table-edit" width="80%" align="center">
            <tr class="title">
              <td colspan="2">查询条件</td>
            </tr>
            <tr>
              <td>工号</td>
              <td>
                <input type="text" name="courierNum" />
              </td>
            </tr>
            <tr>
              <td>收派标准</td>
              <td>
                <input type="text" name="standard.name" />
              </td>
            </tr>
            <tr>
              <td>所属单位</td>
              <td>
                <input type="text" name="company" />
              </td>
            </tr>
            <tr>
              <td>类型</td>
              <td>
                <input type="text" name="type" />
              </td>
            </tr>
            <tr>
              <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </body>
</html>

总结

以上所述是小编给大家介绍的jQuery EasyUI window窗口使用实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jQuery EasyUI window窗口使用实例代码

- Author -

你我他学习吧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery实现轮播图特效
Apr 12 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 #jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
webpack写jquery插件的环境配置
Dec 21 #jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
ResNet50(1) 微信(2) Lifecycle(1) PostMapping(1) 小喇叭(1) 内存泄露(1) Spring(9) Xception(1) 小喇叭开始广播了(1) 温控(1)
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP 文件系统详解
2012/09/13 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JavaScript Split()方法
2015/12/18 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
python得到单词模式的示例
2018/10/15 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
美国女性奢华品牌精品店：INTERMIX
2017/10/12 全球购物
您的时尚，您的生活方式：DTLR Villa
2019/12/25 全球购物
小小的船教学反思
2014/02/21 职场文书
食品流通安全承诺书
2014/05/22 职场文书
设计专业自荐信
2014/06/19 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
十大好看的穿越动漫排名：《瑞克和莫蒂》第一，国漫《有药》在榜
2022/03/18 日漫
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
铁拳制作人赞《铁拳7》老头环Mod：制作精良 但别弄了
2022/04/03 其他游戏
Golang获取List列表元素的四种方式
2022/04/20 Golang