easyui怎么使用

admin 2024年01月14日 01:54 32 0

EasyUI 是一个基于 jQuery 的用户界面插件集合，它可以帮助开发者快速构建美观、功能丰富的网页界面，EasyUI 提供了一系列常用的 UI 组件，如表格、对话框、菜单、布局等，同时也支持自定义组件，以满足各种不同的需求。

下面是一个简单的 EasyUI 示例，展示如何使用 EasyUI 创建一个包含表格和对话框的页面：

1. 需要在 HTML 文件中引入 EasyUI 的 CSS 和 JS 文件，可以在 HTML 文件的头部或尾部引入这些文件，具体位置可以根据需要进行调整。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="path/to/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="path/to/easyui/themes/icon.css">
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. 在 HTML 文件的 body 中添加一个表格和一个对话框的容器。

<table id="myTable" class="easyui-table" style="width:500px"
    data-options="singleSelect:true, toolbar:'#tb-table', rows:[[1,2,3],[4,5,6]]">
    <thead>
        <tr>
            <th data-options="field:'name', width:100">姓名</th>
            <th data-options="field:'age', width:80">年龄</th>
            <th data-options="field:'email', width:150">邮箱</th>
        </tr>
    </thead>
</table>
<div id="dlg-table" class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'表格对话框',modal:true,closed:true">
    <table id="tb-table" class="easyui-toolbar" style="height:30px">
        <tr>
            <td>新增</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
    </table>
</div>

3. 在 HTML 文件的 body 中添加一个按钮，用于打开对话框。

<a href="#" class="easyui-linkbutton" onclick="$('#dlg-table').dialog('open')">打开对话框</a>

4. 在 HTML 文件的 body 中添加一个布局容器，用于展示整个页面。

<div id="main" class="easyui-layout">
    <!-- 页面内容 -->
</div>

5. 在 HTML 文件的 body 中添加一个菜单容器，用于展示菜单。

<ul id="mm" class="easyui-menu" style="width:200px">
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
</ul>