首页
所有分类
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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
详解jQuery中的easyui
Sep 02 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery实现回到顶部效果
Oct 19 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
capture(1) Apache(17) SpringBoot(22) element-china-area-data(1) 数据重复(1) uniapp(4) self(1) Flutter(2) Navigator(1) tabBar(1)
You might like
php自定文件保存session的方法
2014/12/10 PHP
php二维码生成
2015/10/19 PHP
微信支付开发订单查询实例
2016/07/12 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
javascript实现对话框功能警告（alert 消息对话框）确认（confirm 消息对话框）
2019/05/07 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
python安装pil库方法及代码
2019/06/25 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python实现按行分割文件
2019/07/22 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python如何写出表白程序
2020/06/01 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
什么是Web Service？
2012/07/25 面试题
中文系师范生自荐信
2013/10/01 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
工作说明书格式
2014/07/29 职场文书
2015年见习期工作总结
2014/12/12 职场文书
婚姻出轨保证书
2015/05/08 职场文书
商务信函英语问候语
2015/11/10 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL