前端框架 jQuery EasyUI（一）源码包、两种方式声明表格控件

主要是对它的中文手册进行学习，jQuery EasyUI建立在jquery的基础之上。

easyui学习规律：

jqueryui控件学习时控件与控件之间都有继承关系，有些属性事件方法找不到就去父类里面找。

每一个控件都有自己对应的属性，事件，方法。

开发者在声明(渲染)控件是有两种声明方式（即用控件）：

使用基本的html代码声明控件。 class=”easyui-控件名称”。

使用jquery语法声明控件

$(function(){
$("#xxx").控件名称({控件属性:控件属性值,控件属性:控件属性值,控件属性:控件属性值})
})控件名称中是json格式的数据

源码包

下载源码包，之后解压，解压之后可以看到其目录结构，下面对每一个目录下存放的内容进行解释。



demo:案例

demo-mobile:移动版的案例

locale:本地化使用的js文件，使语言成为自己的语言类似于国际化

plugins:插件

src:源码包

themes：就是皮肤默认是浅蓝色，如何想要使用其他的主题可以去官网下，然后将其放到此文件下

jquery.easyui.min.js：是网页开发时页头引入

jquery.min.js：开发时页头引入是压缩版的jquery

jquery.easyui.mobile.js：是移动开发时页头引入

开发环境构建

创建一个动态web项目，在WebContent下新建一个jquery文件夹，从将源码包中本地化文件（留自己需要的语言对应的js文件，想显示英文不用拷）、插件、主题拷贝到jquery文件夹下。

在WebContent新建一个jsp文件，在网页的头部引入下面文件，因为该框架是基于jquery，所以注jquery的引用要在框架的前面。

<link rel="stylesheet" type="text/css" href="jquery/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery/themes/icon.css">
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery/locale/easyui-lang-zh_CN.js"></script>

表格控件

注意一定要严格按照文档的标准写不然会显示不出预期的效果。使用html方式声明。

<table class="easyui-datagrid"
data-options="fitColumns:true,fit:true,pagination:true,
pagePosition:'both',rownumbers:true,striped:true,nowrap:false,url:''">
<thead>
<tr>
<th data-options="field:'id',width:80,checkbox:true,align:'center'">用户ID</th>
<th data-options="field:'userNumber',width:80,align:'center'">用户编号</th>
<th data-options="field:'userName',width:80,align:'center'">用户名称</th>
<th data-options="field:'password',width:80,align:'center'">用户密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>001</td>
<td>name1</td>
<td>2323</td>
</tr>
<tr>
<td>2</td>
<td>002</td>
<td>设置为true，当数据长度超出列宽时将会自动截取</td>
<td>4612</td>
</tr>
</tbody>
</table>

data-options：该框架自己声明的标签，可以在其中对多个属性进行配置，属性之间用逗号隔开，赋值用冒号。

表格自身的常用属性

fitColumns： 值为boolean类型，设置为true将自动使列适应表格宽度以防止出现水平滚动，使列自动均分。

fit： boolean 设置为true时，面版的大小将铺满它所在的容器（浏览器），继承自布局中。

pagination： boolean 设置true将在数据表格底部显示分页工具栏。 因为它继承了分页。

pagePosition： string 定义的分页栏的位置。可用的值有 ‘top’,’bottom’,’both’。

rownumbers ：boolean 设置为true将显示行数。

method：string 请求远程数据的方法类型。

striped： boolean 设置为true将交替显示行背景。

nowrap： boolean 设置为true，当数据长度超出列宽时将会自动截取。

url ：string 一个用以从远程站点请求数据的超链接地址。

列常用的属性

field：表格的列属性：值就是后台javabean的属性名

checkbox ：boolean 设置为true将显示复选框。

title： string 列标题。

width： number 列宽。

align： string 表明如何对其列数据，可选值：’left’，’right’，’center’。

checkbox ：boolean 设置为true将显示复选框。

属性的值为string类型时，将其写在单引号中，以上的书写在浏览器中运行的结果。



表格的右端有一列空白，这是滚动条。

使用jquery语法声明表格控件

在页面的body中添加表格，并为其设置id

<table id="tb"></table>

在页面的头部书写自己的jscript片段，通过选择器选择到身体里的表格，在为其书写属性，表格的数据一般是从远程获取的，列的属性的书写，通过columns的二维数组设置。只是设置了表头，columns上面的设置是表格自身的一些属性。

<script>
$(function(){
$('#tb').datagrid({
url : '',
fit : true,
fitColumns:true,
striped : true,
nowrap : false,
pagination : true,
pagePosition : true,
rownumbers : true,
toolbar:"#bar",
columns : [ [ {
field : 'code',
title : 'Code',
checkbox:true,
width : 100
}, {
field : 'name',
title : 'Name',
align:'center',
width : 100
}, {
field : 'price',
title : 'Price',
width : 100,
align : 'right'
} ] ]
});

})
</script>

toolbar属性： array,selector 数据表格顶部面板的工具栏。可能的值：

1）数组，每个工具选项和链接按钮相同。

2）选择显示的工具栏。

使用的两种方法：

在一个

<div>

的标签定义工具栏:

$('#dg').datagrid({
toolbar: '#tb'
});
<div id="tb">
<!--href="#":连接到当前页面-->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

通过数组定义工具栏:

$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('help')}
}]
});

本文的采用的是在表格的属性上对其进行配置，配置的只是id选择器。

以上的书写运行的结果如下：