在使用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