easyUIフレームワークのダイアログ、レイアウト、DateBox、ページネーション

開発 2023-08-19 19:58:02 訪問数: null

記事ディレクトリ

I.はじめに

  1. 公式サイトダウンロード：EasyUIフレームワーク、JQueryダウンロード
  2. easyUIとjqueryのjsファイルを導入し、これらのファイルをプロジェクトに入れ、jspページにインポートします。
  3. easyUI はコンポーネントを取り出し、定義して DOM 要素にバインドします。バックグラウンドと対話するには、バックグラウンド応答のデータを easyUI API で必要な形式に従って変換する必要があります。

2. easyUIの導入と使い方

  1. 使用する際はeasyUIに対応したjsファイルとスタイルcssファイルをインポートする必要があります
  2. js ファイルをインポートする順序を逆にしないでください。一部の子供靴は、js ファイルをインポートした理由を見つけて、不可解な問題を報告することがよくあります。Web ページがインデックス ページを読み込むとき、上から下に読み込まれることはわかっています。すると、一部の js ファイルは jquery ファイルに依存します。順序が間違っていると、他の js が最初に読み込まれ、次に jquery が最後に読み込まれることになります。上記の未定義の問題が発生するため、導入順序に注意してください。
<!-- 引入依赖jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/icon.css" type="text/css"/>

3. 使用方法

3.1 ダイアログ（ダイアログウィンドウ）

3.1.1 例 1

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.7.2/jquery.min.js"></script>
    <!-- 引入easyUI js文件 -->
    <script type="text/javascript" src="../jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/default/easyui.css" type="text/css" />
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/icon.css" type="text/css" />
</head>

<body>
    <div id="dd">Dialog Content.</div>
    <script>

        $('#dd').dialog({
      
      
            title: 'My Dialog',
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            href: 'get_content.php',
            modal: true
        });
        $('#dd').dialog('refresh', 'new_content.php');

    </script>

</body>

</html>

3.1.2 例 2

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.7.2/jquery.min.js"></script>
    <!-- 引入easyUI js文件 -->
    <script type="text/javascript" src="../jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/default/easyui.css" type="text/css" />
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/icon.css" type="text/css" />
</head>

<body>
    <div id="dd">Dialog Content.</div>
    <script>

        $('#dd').dialog({
      
      
            title: 'My Dialog',
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            href: 'get_content.php',
            modal: true,
            buttons: [
                {
      
      
                    text: "OK",
                    iconCls: "icon-save",
                    handler: function () {
      
      
                        //do something
                    }
                },
                {
      
      
                    text: "Cancel",
                    iconCls: "icon-save",
                    handler: function () {
      
      
                        //do something
                    }
                }
            ]

        });
        $('#dd').dialog('refresh', 'new_content.php');

    </script>

</body>

</html>

3.2 レイアウト（レイアウト）

3.2.1 例 1 - タグを使用してレイアウトを作成する


ここに画像の説明を挿入
ここに画像の説明を挿入
次のように、「easyui-layout」という名前のクラス ID コードを <div/> タグに追加します。

  <!-- 为<div/>增加名为'easyui-layout'的类名 -->
    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    
        <div data-options="region:'north',title:'上North Title',split:true" style="height:100px;"></div>
        <div data-options="region:'south',title:'下South Title',split:true" style="height:100px;"></div>
        <div data-options="region:'east',iconCls:'icon-reload',title:'右East',split:true" style="width:100px;"></div>
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
        
   </div>

3.2.2 例 2 - ネストされたレイアウトの作成

ここに画像の説明を挿入

ネストされたレイアウト パネルの左側 (西) パネルが折りたたまれています
ここに画像の説明を挿入
ここに画像の説明を挿入

3.3 DateBox（日付入力ボックス）

ここに画像の説明を挿入

3.3.1 例 1 - ラベルを使用して日付入力ボックスを作成する

ここに画像の説明を挿入

      <input id="created_time" type="text" class="easyui-datebox"  
      required="required" 
      data-options="value:'Today',panelWidth:'300px',panelHeight:'300px'" />

3.3.2 例 2 - JavaScript を使用して日付入力ボックスを作成し、日付の書式を設定する

日付形式 y/m/d の形式は
自分で設定する必要があることに注意してください。 フォーマッタ属性
ここに画像の説明を挿入
例 1 は次のとおりです。
ここに画像の説明を挿入
例 2 は次のとおりです。

ここに画像の説明を挿入
ここに画像の説明を挿入

<div id="cc" type="text"></div>
  <script>
    $('#cc').datebox({
      
      
      required: true,
      value: 'Today',
      formatter: function (date) {
      
      
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y + '/' + m + '/' + d;
      }
    });
    var v = $('#cc').datebox('getValue');
    alert(v);

  </script>

3.4 ページネーション

クリックして入力: EasyUI 公式ドキュメント、ページネーション タグのプロパティ、メソッド、およびイベントを表示できます。

3.4.1 例 1

コードと実行結果は次のとおりです。
data-options で定義された属性total と pageSizeの実行結果が表示されます。

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

ここに画像の説明を挿入

3.4.2 例 2

ここに画像の説明を挿入
コードと実行結果は次のとおりです。 クリックすると、現在の pageNumber 値と pageSize 値がポップアップ表示されます。

ここに画像の説明を挿入

  <div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;"></div>

  <script>
    $('#pp').pagination({
      
      
      total: 200,
      pageNumber: 3,
      onSelectPage: function (pageNumber, pageSize) {
      
      
        $(this).pagination('loading');
        alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);
        $(this).pagination('loaded');
      }
    });
  </script>

上記のコードでは

$(this).pagination('loading')

ここに画像の説明を挿入

3.4.3 例 3

ここに画像の説明を挿入

ここに画像の説明を挿入

<div id="pp" class="easyui-pagination" style="background:#efefef;border:1px solid #ccc;" 
  data-options="total:2000,pageSize:10,pageList: [10,20,50,100],
  buttons: [
   {
        iconCls:'icon-add',
        handler:function(){
          alert('add')
        } 
   },
   '-',
   {
        iconCls:'icon-save',
        handler:function(){
          alert('save')
        }
   }
  ]">
</div>

3.4.4 例 4

ここに画像の説明を挿入

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <title>人员管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{easyui/themes/default/easyui.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{easyui/themes/icon.css}" />
    <script type="text/javascript" th:src="@{jquery/jquery-1.8.0.min.js}"></script>
    <script type="text/javascript" th:src="@{easyui/jquery.easyui.min.js}"></script>
</head>
ui/jquery.easyui.min.js}"></script>
</head>
<body>
    <table id="dg" class="easyui-datagrid">
        <thead>
        <tr>
            <th data-options="field:'id',sortable:true,width:'120px',hidden:true"></th>
            <th data-options="field:'name',width:'150px'">登录名</th>
            <th data-options="field:'age',width:'150px'">年龄</th>
            <th data-options="field:'address',width:'150px'">住址</th>
        </tr>
        </thead>
    </table>
</body>
<script>
    $(function(){
      
      
        $('#dg').datagrid({
      
      
            url: '/searchPersonList',//后台返回数据的请求url
            title: "用户管理",
            idField: 'id',
            loadMsg: 'please wait',
            singleSelect: true,
            rownumbers: true,
            pagination: true
        });
        var p = $('#dg').datagrid('getPager'); //获取page对象
        $(p).pagination({
      
      
            pageSize: 10,//每页显示的记录条数，默认为10
            pageList: [10,20,30],//可以设置每页记录条数的列表
            beforePageText: '第',//页数文本框前显示的文字
            afterPageText: '页    共 {pages} 页',  //pages为默认的参数吗，代表总页数
            displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'// from，to , total均为默认参数名，from, to 代表现在是总记录中的第几条到第几条，tatal代表总记录数
        });
    });

</script>
</html>

おすすめ

転載: blog.csdn.net/m0_47010003/article/details/131973271
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com