easyui-layout和easyui-combobox和jQuery表格控件flexigrid用法总结

介于本篇文章被踩了一脚，我觉得我还是改改吧。嘿嘿~ 
关于easyui： 
首先说一下easyui和bootstrap的区别。 

easyui适合做后端，bootstrap适合前端。 

因为我时候Java程序员，所以我现在使用的是easyui，但当然更喜欢bootstrap的版式。 
下面我简单说一下我经常要用到的easyui的控件和知识。 
1、easyui-layout 
layout是布局的容器。 

分为上,下,左,右,中（分别为north,south, east, west, center）5个区域。使用的时候例如这样(想怎么布局就上下左右调，就可以了)： 

<div class="easyui-layout" data-options="fit:true">

 

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

 

<div data-options="region:'north'"></div>...

 

</div>

 

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

 

<div data-options="region:'south'"></div>...

 

</div>

 
data-options=”fit:true”的意思，就是可以自适应。 
2、easyui-combobox 

combobox是easyui的一个插件，在使用的时候，如果找不到某些属性和方法，也可以去找combo，因为conbobox类似于继承combo。 

我所用到的下拉框大多是这样的：

<select class="easyui-combobox" style="width: 152px;" >
<option value="" >请选择</option>
<c:forEach var="b" items="${list}">
<option value="${b.id}">${b.name}</option>
</c:forEach>
</select>

1
2
3
4
5
6
1
2
3
4
5
6

这个list是从后台传过来的一个b类型的列表。 
3、flexigrid 

flexgrid不属于easyui属于jQuery的表格控件，也是很常用的，因为大多查询后台数据传过来要在页面上面显示，这个控件对于查询是很方便的。一般的使用就是这个样子的，就不贴自己的代码了。在js中写：

$(function() {$("#flex").flexigrid({
url : 'all.action或者controller的方法路径',
dataType : 'json',
title : '查询结果列表',  //这会显示在最上面
checkbox : true,// 是否要多选框
colModel : [{
display : '第一列',  //这个是显示的
name : 'id',  //这个是实体的属性名
width : 50,// 这一列的宽度
sortable : true,  //排序
align : 'center'  //居中
}, {
display : '第二列',
name : 'orders',
width : 100,
sortable : true,
align : 'center'
}],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19