碼上歡樂
相關內容    簡體    繁體

前端——EasyUI基本使用

本文轉載自   查看原文   2018-03-13 11:55   893    前端

 

一、easyUI使用

1、頁面布局

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
    <!-- 使用div元素描述每個區域 -->
    <div title="XXX系統" style="height: 100px" data-options="region:'north'">北部區域</div>
    <div title="西部菜單" style="width: 200px" data-options="region:'west'">西部區域</div>
    <div data-options="region:'center'">中心區域</div>
    <div style="width: 100px" data-options="region:'east'">東部區域</div>
    <div style="height: 50px" data-options="region:'south'">南部區域</div>
</body>
</html>

2、折疊面板

<div title="西部菜單" style="width: 200px" data-options="region:'west'">
        <!-- 制作accordion折疊面板
			fit:true----自適應(填充父容器)
		-->
        <div class="easyui-accordion" data-options="fit:true">
            <!-- 使用子div表示每個面板,添加圖標 -->
            <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
            <div title="面板二">2222</div>
            <div title="面板三">3333</div>
        </div>
</div>

3、Tabs選項面板

<div data-options="region:'center'">

    <!-- 制作一個tabs選項卡面板 -->
    <div class="easyui-tabs" data-options="fit:true">
        <!-- 使用子div表示每個面板 -->
        <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
        <!--data-options="closable:true"：小XX-->
        <div data-options="closable:true" title="面板二">2222</div>
        <div title="面板三">3333</div>
    </div>
    
</div>

4、動態添加一個選項卡

<div title="西部菜單" style="width: 200px" data-options="region:'west'">
    <!-- 制作accordion折疊面板
        fit:true----自適應(填充父容器)
    -->
    <div class="easyui-accordion" data-options="fit:true">
        <!-- 使用子div表示每個面板,添加圖標 -->
        <div data-options="iconCls:'icon-cut'" title="面板一">

            <a class="easyui-linkbutton" id="btn1">添加一個選項卡</a>

            <script>
                $("#btn1").click(function () {
                    // 判斷當前點擊的標簽是否存在mytabs上
                    var e = $("#mytabs").tabs("exists","系統管理");
                    // 如果存在，選擇那個標簽
                    if (e){
                        $("#mytabs").tabs("select","系統管理")
                    }else {
                        // 否則，在mytabs上添加一個標簽
                        $("#mytabs").tabs("add", {
                            title: "系統管理",   // 標題
                            iconCls: 'icon-edit',    // 圖標
                            closable: true,  // 關閉按鈕
                            content: '<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'  // 內容
                        })
                    }
                })
            </script>
        </div>
        <div title="面板二">2222</div>
        <div title="面板三">3333</div>
    </div>
</div>
<div data-options="region:'center'">

    <!-- 制作一個tabs選項卡面板 -->
    <div class="easyui-tabs" data-options="fit:true" id="mytabs">
        <!-- 使用子div表示每個面板 -->
        <div data-options="iconCls:'icon-cut'" title="面板一">1111</div>
        <!--data-options="closable:true"：小XX-->
        <div data-options="closable:true" title="面板二">2222</div>
        <div title="面板三">3333</div>
    </div>

</div>

二、ztree插件的使用

<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

依賴JQuery

1、使用標准json數據構造ztree（了解）

<div title="面板二">
    <ul id="ztree1" class="ztree"></ul>

    <script>
        $(function () {
            // 配置信息
            var setting1 = {};   // 什么不寫，使用默認值
            // 構造節點數據
            var zNodes1 = [
                {"name":"節點一","children":[
                                                {"name":"節點一_1"},
                                                {"name":"節點一_2"}
                                            ]},//每個json對象表示一個節點數據
                {"name":"節點二"},
                {"name":"節點三"}
            ];
            // 調用API創建ztree
            $.fn.zTree.init($("#ztree1"), setting1, zNodes1);
        })
    </script>

</div>

2、使用簡單json數據構造ztree（重點）

<div title="面板三">
    <ul id="ztree2" class="ztree"></ul>

    <script>
        $(function () {
            // 配置信息
            var setting2 = {
                data: {
                    simpleData: {
                        enable: true//使用簡單json數據構造ztree節點
                    }
                }
            };
            // 構造節點數據
            var zNodes2 = [
                // pid指的是，父節點的id；0為沒有父節點
                {"id":"1","pId":"0","name":"節點一"},
                {"id":"2","pId":"1","name":"節點二"},
                {"id":"3","pId":"2","name":"節點三"}
            ];
            // 調用API創建ztree
            $.fn.zTree.init($("#ztree2"), setting2, zNodes2);
        })
    </script>
</div>

3、發送ajax請求獲取json數據構造ztree

<div title="面板四">
    <ul id="ztree3" class="ztree"></ul>

    <script>
        $(function () {
            // 配置信息
            var setting3 = {
                data:{simpleData: {
                    enable: true    //配置使用簡單json數據構造ztree節點
                }}
            };
            var url = "${pageContext.request.contextPath}/json/menu.json";
            $.post(url,{},function (dat) {
                // 調用API創建ztree
                $.fn.zTree.init($("#ztree3"), setting3, dat);
            },"json");
        })
    </script>
</div>

4、綁定動態添加選項卡

<div title="面板四">
    <ul id="ztree3" class="ztree"></ul>

    <script>
        $(function () {
            // 配置信息
            var setting3 = {
                data: {
                    simpleData: {
                        enable: true//使用簡單json數據構造ztree節點
                    }
                },
                callback:{
                    onClick:function (event, treeId, treeNode) {
                        // 判斷是否有Page字段
                        if (treeNode.page!=undefined){
                            // 判斷是否有那個字段
                            var e = $("#mytabs").tabs("exists",treeNode.name);
                            if(e){
                                $("#mytabs").tabs("select",treeNode.name)
                            }else{
                                $("#mytabs").tabs("add", {
                                    title: treeNode.name,
                                    closable: true,
                                    content: '<iframe frameborder="0" height="100%" width="100%" src="' + treeNode.page + '"></iframe>'
                                })
                            }
                        }
                    }
                }
            };
            var url = "${pageContext.request.contextPath}/json/menu.json";
            $.post(url,{},function (dat) {
                // 調用API創建ztree
                $.fn.zTree.init($("#ztree3"), setting3, dat);
            },"json");
        })
    </script>
</div>

三、EasyUI（2）

導入漢化包
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>

1、 alert

$.messager.alert("標題","內容","question"); 

2、confirm

$.messager.confirm("提示信息","你確定要刪除當前記錄嗎？",function(r){
　　alert(r);　　// r為true/false
});

3、show

$.messager.show({

　　title:'歡迎信息',

　　msg:'歡迎【admin】登錄系統！',

　　timeout:5000,

　　showType:'slide'

});

4、菜單

<!-- 制作菜單 -->
<a data-options="iconCls:'icon-help',menu:'#mm'" class="easyui-menubutton">控制面板</a>

<!-- 使用div元素制作下拉菜單 -->
<div id="mm">
	<div onclick="alert(1111)" data-options="iconCls:'icon-edit'">修改密碼</div>
	<div>聯系管理員</div>
	<div class="menu-sep"></div>
	<div>退出系統</div>
</div>

5、表單驗證

需要加上屬性

<div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
	<form action="" id="editPasswordForm">
		<table cellpadding=3>
			<tr>
				<td>新密碼：</td>
				<td><input required="true" data-options="validType:'length[4,6]'" id="txtNewPass" type="Password" class="txt01 easyui-validatebox" /></td>
			</tr>
			<tr>
				<td>確認密碼：</td>
				<td><input required="true" data-options="validType:'length[4,6]'" id="txtRePass" type="Password" class="txt01 easyui-validatebox" /></td>
			</tr>
		</table>
	</form>
</div>
<div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
	<a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >確定</a> 
	<a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a>
</div>

當點擊提交時，再次進行驗證；驗證通過后發送ajax請求

//為確定按鈕綁定事件
$("#btnEp").click(function(){
	//進行表單校驗
	var v = $("#editPasswordForm").form("validate");
	if(v){
		//表單校驗通過，手動校驗兩次輸入是否一致
		var v1 = $("#txtNewPass").val();
		var v2 = $("#txtRePass").val();
		if(v1 == v2){
			//兩次輸入一致，發送ajax請求
			$.post("userAction_editPassword.action",{"password":v1},function(data){
				alert(data)
				if(data == '1'){
					//修改成功，關閉修改密碼窗口
					$("#editPwdWindow").window("close");
				}else{
					//修改密碼失敗，彈出提示
					$.messager.alert("提示信息","密碼修改失敗！","error");
				}
			});
		}else{
			//兩次輸入不一致，彈出錯誤提示
			$.messager.alert("提示信息","兩次密碼輸入不一致！","warning");
		}
	}
});

擴展校驗規則 

<script type="text/javascript">
	$(function(){
		//為保存按鈕綁定事件
		$("#save").click(function(){
			//表單校驗，如果通過，提交表單
			var v = $("#addStaffForm").form("validate");
			if(v){
				//$("#addStaffForm").form("submit");
				$("#addStaffForm").submit();
			}
		});
		
		var reg = /^1[3|4|5|7|8][0-9]{9}$/;
		//擴展手機號校驗規則
		$.extend($.fn.validatebox.defaults.rules, { 
			telephone: { 
				validator: function(value,param){ 
				return reg.test(value);
			}, 
				message: '手機號輸入有誤！' 
			}
			}); 
		});
</script>

<input type="text" data-options="validType:'telephone'"  name="telephone" class="easyui-validatebox" required="true"/> 

四、datagrid使用方法

方式一：將靜態HTML渲染為datagrid樣式

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'id'">編號</th>
            <th data-options="field:'name'">姓名</th>
            <th data-options="field:'age'">年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>小明</td>
            <td>90</td>
        </tr>
        <tr>
            <td>002</td>
            <td>老王</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

方式二：發送ajax請求獲取json數據創建datagrid 

<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'"
        class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'id'">編號</th>
            <th data-options="field:'name'">姓名</th>
            <th data-options="field:'age'">年齡</th>
        </tr>
    </thead>
</table>

方式三：使用easyUI提供的API創建datagrid（推薦）

<script type="text/javascript">
    $(function(){
        //頁面加載完成后，創建數據表格datagrid
        $("#mytable").datagrid({
            //定義標題行所有的列
            columns:[[
                      {title:'編號',field:'id',checkbox:true},
                      {title:'姓名',field:'name'},
                      {title:'年齡',field:'age'},
                      {title:'地址',field:'address'}
                      ]],
            //指定數據表格發送ajax請求的地址
            url:'${pageContext.request.contextPath }/json/datagrid_data.json',
            rownumbers:true,
            singleSelect:true,
            //定義工具欄
            toolbar:[
                     {text:'添加',iconCls:'icon-add',
                         //為按鈕綁定單擊事件
                         handler:function(){
                            alert('add...');
                         }
                     },
                     {text:'刪除',iconCls:'icon-remove'},
                     {text:'修改',iconCls:'icon-edit'},
                     {text:'查詢',iconCls:'icon-search'}
                     ],
            //顯示分頁條
            pagination:true
        });
    });
</script>

如果數據表格中使用了分頁條，要求服務端響應的json變為：

請求

響應

 

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 easyui 前端分頁及前端查詢 EasyUI搭建前端框架 前端基於easyui的mvc擴展 前端easyui的簡化調用 如何使用easyUI 前端基於easyui的mvc擴展(續) EasyUI EasyUI combogrid 組合框使用 Jquery EasyUI Datagrid的使用 使用EasyUI查詢與刪除 easyui icon的使用相關
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM