JQuery Easy UI ―― 如何让DataGrid自适应页面宽度-jquery-电脑编程网JQuery Easy UI ―― 如何让DataGrid自适应页面宽度作者：xianbin　和相关&&
我想正在用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,
&&&&&&& .......
相关资料：｜｜｜｜｜｜｜JQuery Easy UI ―― 如何让DataGrid自适应页面宽度来源网络，如有侵权请告知，即处理！编程Tags：　　　　　　　　　　　　　　　　&　　　　　　　　　　　　　　　　　　　　jquery ui 和easy ui的选用问题
[问题点数：40分，结帖人aykkk]
jquery ui 和easy ui的选用问题
[问题点数：40分，结帖人aykkk]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2011年12月 Web 开发大版内专家分月排行榜第二
2011年10月 Web 开发大版内专家分月排行榜第二2011年8月 Web 开发大版内专家分月排行榜第二2011年7月 Web 开发大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。后台java：
//接受参数page和rows
page =request.getParameter("page");//每页显示的记录数
rows = request.getParameter("rows");//当前第几页
String stu_id = request.getParameter("stu_id");
String stu_name = request.getParameter("stu_name");
System.out.println(stu_id);
System.out.println(stu_name);
int intPage = Integer.parseInt((page == null || page == "0") ? "1":page);
//每页显示条数
int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows);
//每页的开始记录
第二页为number +1
int start = (intPage-1)*
PrintWriter out = response.getWriter();
StudentDAO sd = new StudentDAOImpl();
//得到总共有多少条数据
int totalCount = sd.getCount(stu_id,stu_name);
ArrayList&Student& students= sd.getStudents(start,number,stu_id,stu_name);
Map&String, Object& jsonMap = new HashMap&String, Object&();//定义map
jsonMap.put("total",totalCount);//total键 存放总记录数，必须的
jsonMap.put("rows", students);//rows键 存放每页记录 list
JSONObject result = JSONObject.fromObject(jsonMap);//格式化result
一定要是JSONObject
System.out.println(result);
out.print(result.toString());
out.flush();
out.close();
&script type="text/javascript"&
$(function(){
$('#dg').datagrid('getPager').pagination({
displayMsg:'当前显示从{from}到{to},共{total}记录',
onBeforeRefresh:function(pageNumber, pageSize){
$(this).pagination('loading');
$(this).pagination('loaded');
&table id="dg" title="My Users" class="easyui-datagrid" style="width:700height:400px"
url="test"
pagination="true"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true"&
&th field="id" width="50"&id&/th&
&th field="stu_id" width="50"&stu_id&/th&
&th field="stu_name" width="50"&stu_name&/th&
&th field="stu_password" width="50"&stu_password&/th&
&th field="stu_yuanxi" width="50"&stu_yuanxi&/th&
&th field="stu_phone" width="50"&stu_phone&/th&
&th field="stu_qq" width="50"&stu_qq&/th&
&th field="stu_sex" width="50"&stu_sex&/th&
&th field="stu_age" width="50"&stu_age&/th&
&div id="toolbar"&
&span&stu_id:&/span&
&input id="stu_id" style="line-height:26border:1px solid #ccc"&
&span&stu_name:&/span&
&input id="stu_name" style="line-height:26border:1px solid #ccc"&
&a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()"&Search&/a&
&a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()"&New User&/a&
&a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"&Edit User&/a&
&a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()"&Remove User&/a&
&div id="dlg" class="easyui-dialog" style="width:400height:280padding:10px 20px"
closed="true" buttons="#dlg-buttons"&
&div class="ftitle"&User Information&/div&
&form id="fm" method="post" novalidate&
&div class="fitem"&
&label&stu_id:&/label&
&input name="stu_id" class="easyui-validatebox" required="true"&
&div class="fitem"&
&label&stu_name:&/label&
&input name="stu_name" class="easyui-validatebox" required="true"&
&div class="fitem"&
&label&stu_password:&/label&
&input name="stu_password"&
&div class="fitem"&
&label&stu_yuanxi:&/label&
&!-- validType="email" --&
&input name="stu_yuanxi" class="easyui-validatebox" &
&div class="fitem"&
&label&stu_phone:&/label&
&input name="stu_phone" class="easyui-validatebox" required="true"&
&div class="fitem"&
&label&stu_qq:&/label&
&input name="stu_qq" class="easyui-validatebox" required="true"&
&div class="fitem"&
&label&stu_sex:&/label&
&input name="stu_sex" class="easyui-validatebox" required="true"&
&div class="fitem"&
&label&stu_age:&/label&
&input name="stu_age" class="easyui-validatebox" required="true"&
&div id="dlg-buttons"&
&a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()"&Save&/a&
&a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"&Cancel&/a&
&script type="text/javascript"&
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = 'add';
function editUser(){
var row = $('#dg').datagrid('getSelected');
$('#dlg').dialog('open').dialog('setTitle','Edit User');
$('#fm').form('load',row);
url = 'edit?id='+row.
function saveUser(){
$('#fm').form('submit',{
onSubmit: function(){
return $(this).form('validate');
success: function(result){
var result = eval('('+result+')');
if (result.success){
$('#dlg').dialog('close');
// close the dialog
$('#dg').datagrid('reload'); // reload the user data
$.messager.show({
title: 'Error',
msg: result.msg
function destroyUser(){
var row = $('#dg').datagrid('getSelected');
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
$.post('destroy',{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
$.messager.show({ // show error message
title: 'Error',
msg: result.msg
},'json');
function doSearch(){
$('#dg').datagrid('load',{
stu_id: $('#stu_id').val(),
stu_name: $('#stu_name').val(),
前台怎么传值过去，就是说
function doSearch(){
$('#dg').datagrid('load',{
stu_id: $('#stu_id').val(),
stu_name: $('#stu_name').val(),
这块怎么写url，怎么把值传到后台
采纳的答案
你完全可以使用同一个url查询的，只是第一次传过去的参数为0，查询时传过去的参数不为0而已。然后在service层拼接sql调用dao层就可以了，不知道我说的你能否明白
&& $('#list').datagrid('options').url = '../../Ashx/News/News_Comment.ashx?func=GetList';
&&&&&&& $('#list').datagrid("reload");
定义 datagrid 时设置了URL，在调用 load 方法不需要传URL，你最后写的doSearch方法中的调用就是正确的参数传递方法。
已解决问题
未解决问题+jquery 1.8
[问题点数：20分]
+jquery 1.8
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。jQuery.Easy-UI 中控制tabs 打开的数量
jQuery.Easy-UI 中控制tabs 打开的数量
[摘要：//用上面的方式获得当前TAB的总数目 var tabcount=$( '#tabs' ).tabs( 'tabs' ). 点窜addTab 方式为： function addTab(subtitle,url,icon){ var tabCount=$( '#tabs' ).tabs( 'tabs' ). // 猎取当前翻开窗心总数目]
//用下面的方法得到当前TAB的总数量
var&tabcount&=&$('#tabs').tabs('tabs').
修改addTab 方法为：
&function&addTab(subtitle,&url,&icon)&{&&&&var&tabCount&=&$('#tabs').tabs('tabs').　　// 获取当前打开窗口总数量&&& var hasTab = $('#tabs').tabs('exists', subtitle); //根据名称判断窗口是否已打开&&& var add = function () {&&&&&&& if (!hasTab) {&&&&&&&&&&& $('#tabs').tabs('add', {&&&&&&&&&&&&&&& title: subtitle,&&&&&&&&&&&&&&& content: createFrame(url),&&&&&&&&&&&&&&& closable: true,&&&&&&&&&&&&&&& icon: icon&&&&&&&&&&& });&&&&&&& } else {&&&&&&&&&&& $('#tabs').tabs('select', subtitle);&&&&&&&&&&& $('#mm-refresh').click();&&&&&&& }&&& }
&&& if (tabCount & 5 && !hasTab) { &&&&&&& var msg = '您当前打开了太多的页面，如果继续打开，会造成程序运行缓慢，无法流畅操作！'&&&&&&& $.messager.confirm("系统提示", msg, function (b) {&&&&&&&&&&& if (b) add();&&&&&&&&&&&&&&&&&& })&&& } else {&&&&&&& add();&&& }
&&& &　　tabClose();
这样允许打开的最大数量为5个（不包括欢迎页）。可根据需要自行修改
感谢关注 Ithao123精品文库频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊}