EasyUI后台管理系统学习三

接连折腾了1天，通过不断的学习和调试，今天终于搞定了easyui中的重要一环——datagrid的数据绑定。

1天的折腾算不了什么，其实只是给我加深了对easyui框架的理解罢了，通过不断的学习easyui的中文指南，让我明白了datagrid数据绑定的写法和用法，也下载了相关的demo捣鼓了一阵，但是在iis7.5 和vs2010下的应用程序却始终没有能够成功，为什么在普通html页面能够正常显示的datagrid的代码在这个里面（我新建了一个aspx页面）却始终搞不定呢？接下来我走上了网络搜索和easyui中文指南详细研究之路（有针对性的是datagrid）。在不断的阅读和实践后，终于是看到了一点曙光，以下就从失败和正确2个方面来写学习的一点点东西：

1、环境：vs2010  IIS7.5

2、引用框架：jquery-1.7.2.min.js、jquery.easyui.min.js、easyui-lang-zh_CN.js、easyui.css、icon.css

3、本地json文件：datajson.json

　　内容：{
 "total":20,
 "rows":[
 {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
 {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
 {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
 {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
 {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"},
 {"productid":"FI-SW-01","productname":"Koi","unitcost":"10.00","status":"P","listprice":"36.50","attr1":"Large","itemid":"EST-1"}
]}

以上是基本条件，接下来我写了几种错误的前台代码，这个代码始终是显示不出来的：

1.<table class="easyui-datagrid" title="基本数据表格" style="width:700px;height:250px"
        data-options="singleSelect:true,collapsible:true,url:‘datajson.json‘" id="table1">
    </table>

这个是直接在内部定义

2.<table class="easyui-datagrid" title="基本数据表格" style="width:700px;height:250px"
        data-options="singleSelect:true,collapsible:true" id="tb">
    </table>

<script type="text/javascript">

$(function () {

　　$("#tb").datagrid({

　　　　url: "datajson.json",

　　　　method: "post",

　　　　fitColumns:true,

　　　　columns: [[

　　　　{ field: "ck", checkbox: true },

　　　　{ field: "itemid", title: "itemid", width: 100 },

　　　　{ field: "listprice", title: "listprice", width: 100 },

　　　　{ field: "unitcost", title: "unitcost", width: 100 },

　　　　{ field: "attr1", title: "attr1", width: 100 },

　　　　{ field: "status", title: "status", width: 100 },

　　　　{ field: "productid", title: "productid", width: 100 },

]],

　　　　pagination: true,

　　　　onLoadSuccess: function () { alert(‘success‘); },

　　　　onLoadError: function () { alert(‘error‘); }

　　});

});

</script>

这个是通过JS定义，唯一不同的是method，由get变成了post，显示不出来，

3.这个是在那个demo 中看到的写法：

<table class="easyui-datagrid" title="列表数据" style="width:700px;height:250px"
   data-options="singleSelect:true,collapsible:true,url:‘datajson.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>

上面3种都搞不定，我写下了正确的：

.<table class="easyui-datagrid" title="基本数据表格" style="width:700px;height:250px"         data-options="singleSelect:true,collapsible:true" id="tb">     </table>

<script type="text/javascript">

$(function () {

　　$("#tb").datagrid({

　　　　url: "datajson.json",

　　　　method: "get",

　　　　fitColumns:true,

　　　　columns: [[

　　　　{ field: "ck", checkbox: true },

　　　　{ field: "itemid", title: "itemid", width: 100 },

　　　　{ field: "listprice", title: "listprice", width: 100 },

　　　　{ field: "unitcost", title: "unitcost", width: 100 },

　　　　{ field: "attr1", title: "attr1", width: 100 },

　　　　{ field: "status", title: "status", width: 100 },

　　　　{ field: "productid", title: "productid", width: 100 },

]],

　　　　pagination: true,

　　　　onLoadSuccess: function () { alert(‘success‘); },

　　　　onLoadError: function () { alert(‘error‘); }

　　});

});

</script>

就是这样，不解释了。具体还有更加详细的关于datagrid的定义的项还有很多，我是在指南和网上看到的，下面我转一个文章来自网络，很详细的解释：

jQuery EasyUI API 中文文档 - DataGrid数据表格使用说明，需要的朋友可以参考下。

扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。 依赖
panel resizable linkbutton pagination 用法

复制代码 代码如下:

<table id="tt"></table>

复制代码 代码如下:

$(‘#tt‘).datagrid({
url:‘datagrid_data.json‘, columns:[[
{field:‘code‘,title:‘Code‘,width:100},
{field:‘name‘,title:‘Name‘,width:100},
{field:‘price‘,title:‘Price‘,width:100,align:‘right‘} ]] });

数据表格（DataGrid）的特性

其特性扩展自 panel，下列是为 datagrid 增加的特性。

列（Column）的特性
DataGrid 的 Column 是一个数组对象，它的每个元素也是一个数组。数组元素的元素是一个配置对象，它定义了每个列的字段。 代码示例：

复制代码 代码如下:

columns:[[

　　 {field:‘itemid‘,title:‘Item ID‘,rowspan:2,width:80,sortable:true},

　　 {field:‘productid‘,title:‘Product ID‘,rowspan:2,width:80,sortable:true},

　　 {title:‘Item Details‘,colspan:4}
],[

　　 {field:‘listprice‘,title:‘List Price‘,width:80,align:‘right‘,sortable:true},

　　 {field:‘unitcost‘,title:‘Unit Cost‘,width:80,align:‘right‘,sortable:true},
　　{field:‘attr1‘,title:‘Attribute‘,width:100},
　　{field:‘status‘,title:‘Status‘,width:60} ]]

编辑器（Editor）
用 $.fn.datagrid.defaults.editors 重写了 defaults。
每个编辑器有下列行为：

例如，文本编辑器（text editor）像下面这样定义：

复制代码 代码如下:

$.extend($.fn.datagrid.defaults.editors, {
text: { init: function(container, options){ var input = $(‘<input type="text" class="datagrid-editable-input">‘).appendTo(container);
return input; }, getValue: function(target){ return $(target).val(); }, setValue: function(target, value){
$(target).val(value); }, resize: function(target, width){ var input = $(target); if ($.boxModel == true){ input.width(width - (input.outerWidth() - input.width())); } else { input.width(width);
} } } });

数据表格视图（DataGrid View） 用 $.fn.datagrid.defaults.view 重写了 defaults。 view 是一个对象，它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。

事件
其事件扩展自 panel，下列是为 datagrid 增加的事件。

方法