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