网页布局四之jQuery-easyUI的datagrid的基本应用

    在使用easyuI时，要先引入四个包，在此就不重复了。

一、要使用easyui的datagrid一定要先在<div>或<table>中引入class，例如：

<table id="dg" class="easyui-datagrid" title="我的DataGrid" style="width:500px;height:600px;"
            data-options=" loadMsg:'数据加载中,请稍后……',            rownumbers:false,singleSelect:true,url:'data/datagrid_data1.json',method:'get',
            toolbar:'#tb',onClickRow:onClickRow,pagination:true,pageSize:2">

在此段代码中不仅有要使用的jquery-easyUi的类型，还有其格式，在style中定义。

二、easyui的datagrid读取的数据类型为json格式。而我没有写后台的controll代码，所以，就要自己写一个json格式的数据文件。然后用url：'xx/xx/data.json'来引入数据。

三、若想在页面上修改数据，就必须要写上

onClickRow:onClickRow。

它是行点击属性。

四、要编辑数据，就要使用editor来定义文本类型。text为文本，number为数字，datebox为日期。如下代码：

<th data-options="field:'id',width:45,editor:{type:'numberbox',options:{precision:0}}">id</th>
				<th data-options="field:'name',width:80,editor:'text'">name</th>
				<th data-options="field:'sex',width:100,editor:'text'">sex</th>
				<!--<th data-options="field:'listprice',width:80,align:'right'">List Price</th>-->
				<th data-options="field:'age',width:80,align:'right',editor:'numberbox'">age</th>
				<!--<th data-options="field:'attr1',width:240">Attribut