在jQuery如何使用EasyUI window窗口-js教程-PHP中文網

首頁

web前端

js教程

在jQuery如何使用EasyUI window窗口

亚连

Jun 15, 2018 pm 03:56 PM

easyuijquerywindow

本文透過實例程式碼介紹了jQuery EasyUI window視窗使用功能，程式碼簡單易懂，非常不錯，具有參考借鏡價值,需要的朋友可以參考下

需求：點選【增加】按鈕，彈出窗口，並對所有輸入項內容進行校驗，校驗通過就提交給後台的action處理，沒有通過校驗就彈出窗口提示。

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

上面是我整理給大家的，希望今後會對大家有幫助。

在微信小程式中gallery slider元件的使用方法

在微信小程式中如何使用scroll- view元件實作滾動動畫

在微信小程式中有關checkbox元件的使用

透過JS如何實現多個小球碰撞反彈

在Angular19中有關自訂表單控制項使用

以上是在jQuery如何使用EasyUI window窗口的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。