您的位置：首页 > 产品设计 > UI/UE

EasyUI

2016-03-02 11:41 435 查看

EasyUI简介

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

准备

首先，你需要从EasyUI的官网上下载EasyUi，地址为：http://www.jeasyui.com/

然后将EasyUI所需要的文件引入你的网页中

以下是EasyUI几个重要的支持文件：

<link href="~/Content/styles/easyui.css" rel="stylesheet" />  样式表
<link href="~/Content/styles/icon.css" rel="stylesheet" />  图标样式
<script src="~/Scripts/jquery-1.7.1.js"></script>  jquery文件
<script src="~/Scripts/Webscript/jquery.easyui.min.js"></script> easyui主js
<script src="~/Scripts/Webscript/easyui-lang-zh_CN.js"></script> easyui汉化

开始使用EasyUI

准备工作做好了，现在开始使用EasyUI了。

在使用EasyUI之前必须声明UI空间，声明的方法有两个：

1. 直接在HTML声明组件

<div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function({})">
dialog content.
</div>

2. 使用JavaScript代码来创建组件

HTML代码

<input id="cc" style="width:200px" />

js代码

$('#cc').combobox({
url: ...,
required: true,
valueField: 'id',
textField: 'text'
});

数据表格DataGrid ##

HTML创建：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic DataGrid</h2>
<p>The DataGrid is created from markup, no JavaScript code needed.</p>
<div style="margin:20px 0;"></div>

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>

</body>
</html>

JavaScript创建:

HTML代码：

<![这里写图片描述](http://img.blog.csdn.net/20160302112248744)table id="blog"></table>

JQuery代码：

$('#blog').datagrid({
url: 'url', //请求的地址
title: '用户列表',
width: 680,
height: 'Auto',
fitColumns: true,//列自适应
loadMsg: '正在加载用户信息',
nowrap: true,
striped: true,
//idField: "Blog_Id",
pagination: true, //是否有分页
singleSelect: false,//是否单选
pageNumber: 1,//当前页码
pageSize: 5, //pageSize的值必须是pageList中的值中的一个
pageList: [5, 10, 15],
queryParams: {},//传递参数
columns: [[
{ field: 'ck', checkbox: true },//复选框
{field:'Blog_Id',title:'博客编号',width:100,hidden:'true'},
{ field: 'Blog_Title', title: '博客标题', width: 100 },
{ field: 'Blog_Type', title: '博客类型', width: 100 },
{ field: 'Blog_Author', title: '博客作者', width: 100 },
{ field: 'Blog_Content', title: '博客内容', width: 100 },
{ field: 'Blog_DateTime', title: '博客时间', width: 100 }
]],
//配置工具栏
toolbar: [
{
id: 'btnAdd',//按钮的ID
text: '添加',//按钮上现实的文字
iconCls: 'icon-add',//按钮图标
handler: function () {
//点击按钮触发的事件
}
}, {
id: 'btnDel',
text: '删除',
iconCls: 'icon-remove',
handler: function () {

}
},
{
id: 'btnEdit',
text: '编辑',
iconCls: 'icon-edit',
handler: function () {

}
}]
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航