简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

WINでjQuery EasyUIを使用する方法

php中世界最好的语言
リリース： 2018-04-19 14:01:51
オリジナル
1237 人が閲覧しました

今回は、WINでjQuery EasyUIを使用する方法と、WINでjQuery EasyUIを使用する際の注意事項を紹介します。実際のケースを見てみましょう。 

<!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;">
    <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>
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jquery 入力ボックスでキーワードを検索し、強調表示します

JS を使用して、60 秒後に確認コードを再送信する機能を作成します

JS 配列の重複排除のグラフィックとテキストの説明

以上がWINでjQuery EasyUIを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
easyui jquery 使用
ソース：php.cn
前の記事：jQuery アクション リストの兵士が新しい要素を動的に追加します 次の記事：jQuery EasyUI がタブ パネルのタブを操作する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！