jQueryEasyUIwindow窗口使用實例代碼

需求：點擊【增加】按鈕，彈出窗口，并對所有輸入項內(nèi)容進行校驗，校驗通過就提交給后臺的action處理，沒有通過校驗就彈窗提示。

我們提供的服務(wù)有：網(wǎng)站設(shè)計制作、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、象山ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的象山網(wǎng)站制作公司

jQuery EasyUI window窗口使用實例代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>管理取派員</title>
    <!-- 導(dǎo)入jquery核心類庫 -->
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <!-- 導(dǎo)入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隱藏，再顯示，不會出現(xiàn)頁面刷新效果
        $("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("警告","表單存在非法內(nèi)容，請重新填寫","warning");
          }
          //關(guān)閉窗口
          $("#addWindow").window('sclose');
        });
      });
      function doDblClickRow(){
        alert("雙擊表格數(shù)據(jù)...");
      }
    </script>
  </head>
  <body class="easyui-layout" >
    <div region="center" border="false">
      <table id="grid"></table>
    </div>
    <div class="easyui-window" title="對收派員進行添加或者修改" id="addWindow" collapsible="false" minimizable="false" maximizable="false" >
      <div region="north"  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"  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" >
      <div  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>

總結(jié)

以上所述是小編給大家介紹的jQuery EasyUI window窗口使用實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站題目：jQueryEasyUIwindow窗口使用實例代碼
轉(zhuǎn)載來源：http://muchs.cn/article32/jpgssc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、服務(wù)器托管、微信公眾號、全網(wǎng)營銷推廣、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)