今天你学习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>
