今天你学习easyui了吗？
首先，刚学习easyui的朋友们可以多去easyui中文网中进行学习，本篇介绍easyui＋php数据如何搭建。
<script> $(function(){ $("#tt").datagrid({ height:$("#body").height()-$(‘#mainPanle‘).height(), width:$("#body").width(), idField:‘user_id‘, //data: data, url:‘{:U(‘Inter/admin/category_list‘)}‘, //php提供接口，引入json数据 singleSelect:true, nowrap:true, fitColumns:true, rownumbers:true, showPageList:false, columns:[[ {field:‘category_name‘,title:‘分类名‘,width:100,halign:"center", align:"left"},//数据表格中对应的字段 {field:‘category_vip‘,title:‘分类折扣%‘,width:100,halign:"center", align:"left"}, {field:‘category_agde‘,title:‘代理商折扣%‘,width:100,halign:"center", align:"left"}, {field:‘category_deco‘,title:‘供销商折扣%‘,width:100,halign:"center", align:"left"}, {field:‘category_image‘,title:‘分类示意图‘,width:300,height:230,align:‘center‘, formatter:function(value,row,index){return ‘<img style=\"width: 100px;height: 100px;\" src="‘+row.category_image+‘" />‘;}//表格独立显示 } ]], toolbar:‘#tt_btn‘, pagination:true, pageSize: 20, pageList: [5,10,15,30], striped:true, //交替显示行背景 onDblClickRow:function(rowIndex, rowData){//双击方法 viewDetail(rowData.user_id); } }); }) function viewDetail(date, id){ var row = $("#tt").datagrid("getSelected"); if (row) { $("#dlg1").dialog("open").dialog(‘setTitle‘, ‘分类相关信息‘); $("#fm2").form("load", row); url = "{:U(‘Inter/admin/category_update‘)}?id=" + row.category_id; } } //监听窗口大小变化 window.onresize = function(){ setTimeout(domresize,300); }; //改变表格宽高 function domresize(){ $(‘#tt‘).datagrid(‘resize‘,{ height:$("#body").height()-$(‘#mainPanle‘).height(), width:$("#body").width() }); } </script>
<body>
<table id="tt" style="table-layout:fixed;"></table>
//id名要与上面的datagrid一一对应
</body>
原文：http://www.cnblogs.com/maojiayan/p/4892259.html