首页
所有分类
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遍历节点方法汇总(推荐)
May 13 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
mysqldump(1) xps(1) csgo(1) sentinel(1) sock(2) protocol(1) macos(1) XPathParser(1) CAD(1) Stater(1)
You might like
PHP保存session到memcache服务器的方法
2016/01/19 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
jquery插件之easing使用
2010/08/19 Javascript
JavaScript strike方法入门实例（给字符串加上删除线）
2014/10/17 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python Django批量导入不重复数据
2016/03/25 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
20招让你的Python飞起来!
2016/09/27 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
keras 权重保存和权重载入方式
2020/05/21 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
应届本科生推荐信范文
2013/12/25 职场文书
警示教育活动总结
2014/05/05 职场文书
2014年党支部学习材料
2014/05/19 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
开平碉楼导游词
2015/02/06 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
nginx处理http请求实现过程解析
2021/03/31 Servers
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL