首先引入相应的css 和jq 脚本
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
然后创建一个table 标签 实际上就是为这个table 标签的class属性赋值为
class=“easyui-datagrid” 此方法以类的模式创建
<table id="dg" class="easyui-datagrid" title="新闻信息管理" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',
method:'get',toolbar:toolbar,remoteSort:true,
rownumbers:true,
multiSort:true,rownumbers:true,
onLoadSuccess:function(){
$(this).datagrid('freezeRow',0).datagrid('freezeRow',1);//此句代码表示冻结了 第一行与第二行
}
">
<thead>
<tr>
<th data-options="field:'itemid',resizable:false,width:80,sortable:true,formatter:formatPrice">Item ID</th>
<th data-options="field:'productid',resizable:true,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>
<script type="text/javascript">
var toolbar = [{
text:'Add',\\按钮显示的文本
iconCls:'icon-add',\\按钮的图标
handler:function(){alert('add')}\\点击当前按钮触发的事件
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){alert('cut')}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){alert('save')}
}];
function formatPrice(val, row) {
if (val < 30) {
return '<span style="color:red;">(' + val + ')</span>';
} else {
return val;
}
}
</script>
还可以通过写jquery 的形式 创建
<script type="text/javascript">
$(function () {
// $('#dg').datagrid({
// url: 'datagrid_data1.json',
// method: 'get',
// title: 'Context Menu on DataGrid',
// iconCls: 'icon-save',
// width: 700,
// height: 250,
// fitColumns: true,
// singleSelect: true,
// toolbar:[{
text:'Add',\\按钮显示的文本
iconCls:'icon-add',\\按钮的图标
handler:function(){alert('add')}\\点击当前按钮触发的事件
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){alert('cut')}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){alert('save')}
}],
pagination:true
// pageNumber :1,
// pageSize :5,
// pageList:[5],
// columns: [[
//如何要向后台请求数据的话 fileld字段名必须和后台 序列化后的键的名称一致
// { field: 'itemid', title: 'Item ID', width: 80 },
// { field: 'productid', title: 'Product ID', width: 120 },
// { field: 'listprice', title: 'List Price', width: 80, align: 'right' },
// { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
// { field: 'attr1', title: 'Attribute', width: 250 },
// { field: 'status', title: 'Status', width: 60, align: 'center' }
// ]],
// rowStyler: function(index,row){
if (row.listprice < 30){
return 'background-color:#6293BB;color:#fff;font-weight:bold;';
}
}
//
// });
})
</script>
这样一个表格就显示出来了下面对表格出现的属性做详细说明
表格中设置都放到 data-options 属性里面
singleSelect : 返回值 true 或 false 是否只能选中一行
collapsible: 返回值 true 或 false 是否显示弹出按钮
url: 返回一个字符串 表示 向服务器发起请求的地址
method：请求方式 post 或 get
field: 返回字符串 表示列的字段
resizable:返回 true 或 false 表示是否可以拖拽列
align：返回值 ‘right’ ,‘left’,’ center’ 表示 列文本对齐方式
toolbar： 可在表格头部显示对应的按钮如： 添加，修改，删除 等信息 返回一个 数组类型的json。
toolbar属性的相关说明见上述例子。
remoteSort: 返回 true 或 false 表示是否从服务器排序数据。
multiSort： 返回true 或 false 表示是否进行多重排序。
sortable: 返回true 或 false 表示在列中是否可以排序
rownumbers: 返回true 或 false 表示是否显现带有标题列的行
onLoadSuccess:返回类型为 function 表示加载成功后执行的函数
formatter:返回类型为function 表示列中数据的格式化
pageNumber number 当设置了 pagination 属性时，初始化页码。 1
pageSize number 当设置了 pagination 属性时，初始化页面尺寸。 10
pageList array 当设置了 pagination 属性时，初始化页面尺寸的选择列表。 [10] 与pageSize 向呼应
queryParams object 当请求远程数据时，发送的额外参数。
rowStyler：返回function 传递的参数 index 表是行索引, row表示行 row.listprice 行中某字段的值
toolbar:返回一个arr 表示工具栏上显示按钮
pagination:返回 一个bool 表示是否显示分页栏
在url：向服务器请求数据时，rows 代表请求的所有数据 ,total 表示请求的总记录数 ,page 表示请求的当前页.