JQuery Easy UI —— 如何让DataGrid自适应页面宽度 - 苏显斌的Java空间 - ITeye技术网站
博客分类：
我想正在用JQuery Easy UI的朋友一定很希望DataGrid能够自适应页面大小变化，目前我还没发现其自带此功能，因此简单写了一个实现方法，与网友们分享，也希望能够帮助有需要的朋友。
下面是我基于JQuery做的一个实现：
* JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。
$.fn.extend({
* 修改DataGrid对象的默认大小，以适应页面宽度。
* @param heightMargin
高度对页内边距的距离。
* @param widthMargin
宽度对页内边距的距离。
* @param minHeight
最小高度。
* @param minWidth
最小宽度。
resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {
var height = $(document.body).height() - heightM
var width = $(document.body).width() - widthM
height = height & minHeight ? minHeight :
width = width & minWidth ? minWidth :
$(this).datagrid('resize', {
height : height,
width : width
使用方法：
$(function() {
var datagridId = 'userDataGrid';
// 其他代码
// 第一次加载时自动变化大小
$('#' + datagridId).resizeDataGrid(20, 20, 300, 600);
// 当窗口大小发生变化时，调整DataGrid的大小
$(window).resize(function() {
$('#' + datagridId).resizeDataGrid(20, 20, 300, 600);
在此补充一下，由于IE6下JS的执行效率很低，因此在让DataGrid自适应页面大小变化的时候，请将DataGrid的fitColumns属性设置为false，否则改变页面大小会导致IE出现一定时间的停顿。设置方法为：
&&& $('#' + datagridId).datagrid({
&&&&&&& title: '用户类型',
&&&&&&& url: 'userType.json',
&&&&&&& fitColumns: false,
&&&&&&& .......
浏览 16344
浏览: 128716 次
插件只有这几行代码吗jQuery.fn.dataTableEx ...
好用，谢了！就是有一点问题，如果DataGird 有分页栏，会 ...
这种方式是将工程发布为war还是ear？因为以前也这样写过，但 ...
spring data jpa相关代码demo下载:http: ...
楼主，能否给个完整的例子？在下在用jqplot绘图时，在添加了 ...使用jqueryeasyuidatagrid请求servlet没有反应我现在想使用jqueryeasyuidatagrid做一个分页,功能,打算通过url请求后台的servlet返回json数据,可是
使用jquery easyui datagrid请求servlet没有反应
我现在想使用jquery easyui datagrid做一个分页,功能,打算通过url请求后台的servlet返回json数据,可是怎么弄servlet就是没反应,望大侠们帮一下忙,感激不尽!!
datagrid代码:
&script type="text/javascript"&
$(function(){
$('#list_data').datagrid({
title:'日志',
iconCls:'icon-edit',
width:700,
height:'auto',
nowrap:false,
striped:true,
border:true,
collapsible:false,
url:'listApp',
//就是在这里没反应
listApp是我的servlet
remoteSort:false,
idField:'fldId',
singleSelect:true,
collapsible:true,
pagination:true,
rownumbers:true,
frozenColumns:[[
{field:'ck',checkbox:true}
toolbar:[{
text:'添加',
iconCls:'icon-add',
handler:function(){
openDialog("add_dialog","add");
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function() {
openDialog("add_dialog","edit");
}, '-',{
text: '删除',
iconCls: 'icon-remove',
handler: function(){
delAppInfo();
var p=$('#list_data').datagrid('getPager');
$(p).pagination({
pageSize:10,
pageList:[5,10,15],
beforePageText:'第',
afterPageText:'页
共{pages}页',
displayMsg:'当前显示 {from} - {to} 条记录
共{total} 条记录',
&table class="easyui-datagrid" id="list_data"&
&th data-options="field:'id'"&id&/th&
&th data-options="field:'ip'"&ip&/th&
&th data-options="field:'picture1Name'"&图片1&/th&
&th data-options="field:'picture2Name'"&图片2&/th&
&th data-options="field:'picture1'"&数据库图片1&/th&
&th data-options="field:'picture2'"&数据库图片2&/th&
&th data-options="field:'simility'"&相似度&/th&
&th data-options="field:'time'"&上传时间&/th&
&tbody&......
下面是servlet代码:
@WebServlet("/listApp")
public class listApp extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("---------执行servlet－－－－－－－－－－－");
String page=request.getParameter("page");
String rows=request.getParameter("rows");
System.out.println(page);
System.out.println(rows);
int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);
int start=(intPage-1)*
getuploadLogService service=new getuploadLogServiceImpl();
ArrayList logs=service.getpageData(start, number);
Map jsonMap=new HashMap();
jsonMap.put("total", service.getCount());
jsonMap.put("rows",logs);
response.setContentType("application/json");
JSONObject result=JSONObject.fromObject(jsonMap);
System.out.println(result.toString());
response.getWriter().write(result.toString());
开发工具看下返回的数据格式是否正确，一般结构是
{"total":总数量,"rows":[{....},....]}
这种结构的数据
解决方案二：
如果没进servlet，那说明你的datagrid的url写的不对，你可以试试在浏览器里面直接输入完整的url请求，看能不能进servlet。
【云栖快讯】快速解决数据库难题，云数据库经典案例及最佳实践直播专场！阿里云数据库专家团队成员倾囊相授！赶紧报名。&&
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、PostgreSQL、高...问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
页面中报错, jquery.js 中有一处报了length未定义，求指教
$('#tb_helps').datagrid({
url: '/Admin/PluginHelps/HotList',
title: '帮助内容列表',
iconCls: 'icon-view',
dataType:'json',
height: 650,
width: function () { return document.body.clientWidth * 0.9; },
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible: true,
pagination: true,
pageSize: 100,
pageList: [50, 100, 200],
rownumbers: true,
sortOrder: 'asc',
remoteSort: false,
idField: 'ID',
columns: [[
field: "Title",
title: "@T("Admin.ContentManagement.Helps.Help.Fields.Title")",
width: 300
field: "DisplayOrder",
title: "@T("Admin.ContentManagement.Helps.Help.Fields.DisplayOrder")",
width: 150,
field: "Detail",
title: "@T("Admin.ContentManagement.Helps.Help.Fields.Detail")",
width: 800,
field: "Id",
title: "@T("mon.Edit")",
width: 125,
template: '&a href="HelpEdit/#=Id#"&@T("mon.Edit")&/a&'
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
请检查返回的json数据是不是一个数组
$('#tb_helps').datagrid({
//url: '/data/test.json',
'Title':'Title',
'DisplayOrder':'DisplayOrder',
'Detail':'Detail',
title: '帮助内容列表',
iconCls: 'icon-view',
dataType:'json',
height: 650,
width: function () { return document.body.clientWidth * 0.9; },
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible: true,
pagination: true,
pageSize: 100,
pageList: [50, 100, 200],
rownumbers: true,
sortOrder: 'asc',
remoteSort: false,
idField: 'ID',
columns: [[
field: "Title",
title: "Title",
width: 300
field: "DisplayOrder",
title: "DisplayOrder",
width: 150,
field: "Detail",
title: "Detail",
width: 800,
field: "Id",
title: "Id",
width: 125,
template: '&a href="HelpEdit/#=Id#"&@T("mon.Edit")&/a&'
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App其他回答(1)
最好是在前台转换不要在后台
收获园豆：5
园豆：21106
园豆：21106
&&&您需要以后才能回答，未注册用户请先。