详解jQuery中的easyui

这里是“详解jQuery中的easyui”的完整攻略，包括easyui的入门、常用组件的使用和示例。

入门

引入easyui

<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

注意：easyui依赖于jQuery，因此你应该先引入jQuery库。

基本html结构

easyui组件需要基本的html结构来作为其父元素容器。通常为了方便管理，html容器元素会被包装在一个div元素内。以下是一个示例的html结构：

<div id="myDiv">
    <table class="easyui-datagrid"></table>
</div>

初始化easyui

easyui组件需要通过JavaScript被初始化。这个过程包括创建和配置相应的组件对象。以下是初始化所需的代码：

$(function(){
    $('#myDiv .easyui-datagrid').datagrid({
        columns:[[ /* ... */]],
        url: 'datagrid_data.json',
        /* ... */
    });
});

在上面的代码中，通过jQuery选择器找到了id为“myDiv”的div元素，再通过“.easyui-datagrid”选择器，找到了datagrid元素，并初始化它。在初始化的时候，需要传递一些配置选项。

常用组件

在easyui中，最常用的组件有datagrid、tree、tabs、dialog、panel。

datagrid

datagrid是一种显示表格数据的组件，可以支持各种格式的数据列，并且提供了多种样式和交互功能。

以下是一个示例，包括一个表头和一些数据：

<table id="tt" class="easyui-datagrid" style="height:250px"
        url="datagrid_data1.json"
        toolbar="#toolbar" pagination="true"
        rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="itemid" width="50">Item ID</th>
            <th field="productid" width="50">Product ID</th>
            <th field="listprice" width="50" align="right">List Price</th>
            <th field="unitcost" width="50" align="right">Unit Cost</th>
            <th field="attr1" width="50">Attribute</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New Item</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">Edit Selected</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteItem()">Delete Selected</a>
</div>

在上面的代码中，属性url指定了从后台获取数据的url；属性toolbar指定了datagird的上方工具栏；属性pagination指定了是否开启分页功能，rownumbers指定了是否显示行号，fitColumns指定台列是否自适应表格宽度，singleSelect指定了是否启用单选。

tree

tree是一种基于树形结构显示数据的组件，可以支持任意层级和复杂的数据结构。

以下是一个示例，展示了一个简单的tree：

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder 1</span>
        <ul>
            <li><span>File 1.1</span></li>
            <li><span>File 1.2</span></li>
        </ul>
    </li>
    <li>
        <span>Folder 2</span>
        <ul>
            <li>
                <span>Sub Folder 2.1</span>
                <ul>
                    <li><span>File 2.1.1</span></li>
                    <li><span>File 2.1.2</span></li>
                </ul>
            </li>
            <li><span>File 2.2</span></li>
        </ul>
    </li>
</ul>

在上面的代码中，每个节点用一个li元素表示，每个节点都可以包含一个子树，用ul元素表示。

tabs

tabs是一种多tab页面布局的组件，可以支持多页面之间的切换和动态添加或删除页面。

以下是一个示例，展示了一个tab页面：

<div class="easyui-tabs" style="height:250px">
    <div title="Home">
        Tab content 1
    </div>
    <div title="About">
        Tab content 2
    </div>
    <div title="Contact">
        Tab content 3
    </div>
</div>

在上面的代码中，每个tab用一个div元素表示，title属性指定了tab标题内容。

dialog

dialog是一种对话框组件，可以用来显示提示信息，让用户输入数据或者进行简单的交互操作。

以下是一个示例，展示了一个对话框：

<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px"
        closed="true" buttons="#dlg-buttons">
    <form id="fm" method="post">
        <div class="fitem">
            <label>Name:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-validatebox" validType="email">
        </div>
        <div class="fitem">
            <label>Message:</label>
            <textarea name="note" style="width:100%;height:50px;"></textarea>
        </div>
    </form>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
</div>

在上面的代码中，可以看到对话框的内容和按钮都是通过HTML元素构建的。其中，form元素包含了三个表单元素input和textarea，用于接收用户的输入。#dlg-buttons指定了对话框的按钮组。

panel

panel是一种用于分割页面区域的组件，可以将页面分成若干个区域，每个区域可以包含任意的HTML元素和其他easyui组件。

以下是一个示例，展示了一个panel：

<div class="easyui-panel" title="Panel" style="width:400px;height:200px;padding:10px">
    This is a panel.
</div>

在上面的代码中，class="easyui-panel"指定了元素是一个panel组件，title属性指定了标题的内容。

示例

示例一：easyui datagrid与后台交互

假设后台提供一个接口url，用于返回一个json格式的数据。我们可以使用easyui的datagrid来展示这些数据。以下是一个示例代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#dg').datagrid({
                url:'url',
                columns:[[
                    {field:'id',title:'ID',width:100},
                    {field:'name',title:'Name',width:100},
                    {field:'age',title:'Age',width:100},
                    {field:'sex',title:'Sex',width:100}
                ]]
            });
        });
    </script>
</head>
<body>
    <table id="dg" class="easyui-datagrid" style="width:700px;height:250px">
    </table>
</body>
</html>

在上面的代码中，我们使用datagrid组件展示数据，使用url属性指定了后台接口。easyui会在请求后台接口并且返回json数据后，自动将数据加载到datagrid组件中，再显示在页面上。注意columns属性定义了表头的列名。

示例二：easyui tree与第三方插件交互

我们可以使用第三方插件将easyui tree组件中的数据进行可视化处理。以下是一个示例代码：

<html>
<head>
    <link rel="stylesheet" href="css/easyui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/gooeymenu.js"></script>
    <script>
        $(function(){
            $("#mtree").tree({
                url:'tree_data.json',
                onClick: function(node){
                    var text = node.text;
                    var iconCls = node.iconCls;
                    alert('text: ' + text + ', iconCls: ' + iconCls);
                }
            });

            $("#gooey-menu").gooeymenu({
                bgColor: "#16a085",
                contentColor: "white",
                align: "br",
                style: "circle",
                source: [
                    {icon: "img/home.png", title: "Home", url: "#"},
                    {icon: "img/life_bouy.png", title: "Support", url: "#"},
                    {icon: "img/locked.png", title: "Login", url: "#"},
                    {icon: "img/user.png", title: "Profile", url: "#"},
                    {icon: "img/cog.png", title: "Settings", url: "#"}
                ]
            });
        });
    </script>
</head>
<body>
    <ul id="mtree"></ul>
    <div id="gooey-menu"></div>
</body>
</html>

在上面的代码中，我们使用了gooeymenu插件将easyui的tree组件与一个带有动画效果的menu组件关联起来。监听了树节点的点击事件，当点击节点时就弹出含有节点信息的提示框。source属性定义menu中每个项的内容和图标。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解jQuery中的easyui - Python技术站

入门