Easyui

var datagrid;
$(function(){
datagrid = $('#datagrid').datagrid({ //使用javascript创建datagrid数据网络
url : '${pageContext.request.contextPath}/price!datagrid.do', //通过ajax请求url，得到json数据
pagination : true, //是否启用分页
pagePosition : 'bottom', //页码位置设置
pageSize : 10,
pageList : [10, 20, 30, 40 ],
fit : true,
fitColumns : true, //自适应大小
nowrap : true, //是否在一行显示所有数据
//rownumbers : false, 是否显示序号
//singleSelect : true, 只选定一行
//collapsible : true, 折叠
border : false,
idField : 'tid', //唯一约束字段
sortName : 'tname', //默认是以哪个字段排序
sortOrder : 'asc', //默认排序方式
checkOnSelect : true,
selectOnCheck : true,
frozenColumns : [ [ { //宽度可变,冻节列
title : '编号',
field : 'tid',
width : 150,
sortable : true, //排序
checkbox : true //编号变为选择框
}, {
field : 'tname',
title : '姓名',
width : 180,
sortable : true
} ] ],
columns : [ [ { //宽度固定
field : 'tprice',
title : '金额',
width : 180,
sortable : true
}, {
field : 'trecordDate',
title : '登记时间',
width : 250,
sortable : true
} ] ],
toolbar : [ { //功能添加列表
text : '增加',
iconCls : 'icon-add',
id : '/price!priceAdd.do',
handler : function(){
append();
}
},'-' ,{
text : '删除',
iconCls : 'icon-remove',
id : '/price!delete.do',
handler : function(){
remove();
}
},'-', {
text : '修改',
iconCls : 'icon-edit',
id : '/price!priceEdit.do',
handler : function(){
edit();
}
},'-'],
onRowContextMenu : function(e, rowIndex, rowData) { //右击触发
e.preventDefault(); //取消默认行为
$(this).datagrid('unselectAll');
$(this).datagrid('selectRow', rowIndex);
$('#menu').menu('show', { //右击显示
left : e.pageX,
top : e.pageY
});
}

	});

});

深入学习easyui推荐：
视频网站：http://study.163.com/course/courseMain.htm?courseId=943002
学习教程：http://www.jeasyui.net/tutorial/13.html