easyui datagrid渲染~

代码如下:在initGrid() 方法后。我用 $.parser.parse(grid); 渲染datagrid,依旧不行
但是我loadData的时候第一行加载不了数据。导致我20行记录只显示19行。最后一行不显示。

 //添加tab
function addTabs(tabArr){
    if(tabArr&&(Object.prototype.toString.call(tabArr) === '[object Array]')){
        for(var i=0;i<tabArr.length;i++){
            $('#tabs').tabs('add',{
                title:tabArr[i],
                selected:false,
                content:"<table id='grid"+i+"' name='gn'  data-options='border:false,fit:true '></table>",//
            });
        }
        $('#tabs').tabs('select',0);
    }
}
 /**
 * [initGrid 初始化datagrid]
 */
function initGrid() {
    grid = $("[name='gn']").datagrid({
       // data: data,
        idField : 'columnNo',
        sortName: 'type,seq',
        checkOnSelect:false,
        selectOnCheck:false,
        pagination:false,
        frozenColumns: [[{//columns
            width: '50',
            field: 'checkbox',
            checkbox: true
        },
        {
            width: '70',
            title: '编号',
            field: 'ptdNo',
            hidden: true
        },
        {
            width: '80',
            title: '模版编号',
            field: 'ptNo',
            hidden: true
        },
        {
            width: '110',
            title: '列编码',
            field: 'columnNo',
            hidden: true
        },
        {
            width: '125',
            title: '列名',
            field: 'name',
        }]]
                //省略
            });
}
0

4个回答

小问题啊 你看看 请求服务器返回的数据 是否 有20条 看看 分页是否有问题

0
jar4161
jar4161 和分页无关,我没做分页
接近 3 年之前 回复

就是渲染的问题 跟踪了html

0

图片说明
跟踪html发现没有添加到

里面去。
$("#grid0").datagrid({
……
})
这样写也是一样
0

解决了 原来是我的tabs 设置了fit:true属性 导致高度溢出了。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
easyui的datagrid的数据渲染
easyui的datagrid的数据渲染
easyui datagrid 数据源获取与表格渲染 demo1 demo2
[b]demo1:表格和数据同步[/b] [code=&quot;java&quot;]$(function() { // queryData('','','','','',1,10); // $('#gcStateId').combobox('setValue', ''); $('#gcTypeId').combobox('setValue',''); // });...
easyUI使用datagrid加载数据后,渲染表格中的控件
$('#price_purchase_index_datagrid').datagrid({  onLoadSuccess: function () {//加载成功后渲染  $(".inputNum").each(function(){ $(this).numberspinner({     value:val,            width:80,            
关于EasyUI Datagrid 数据网格渲染数据过慢
width,列的宽度。如果未定义,则宽度会自动扩展以适应它的内容。没有定义宽度将会降低性能; nowrap boolean 设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。 默认为 true autoRowHeight boolean 定义是否设置基于该行内容的行高度。设置为 false,则可以提高加载性能。默认为 true
easyUI动态插入数据,插入完毕后渲染控件
var datagrid = $('#purchase_add_goods_datagrid');      //根据索引选中行,获取该行数据,然后生成html    datagrid.datagrid('selectRow', index);    var row = datagrid.datagrid('getSelected'); //添加行数据    var is_have = false...
【EasyUI-加载完Html内容样式渲染完成后显示】
等待页面的css样式加载完毕,Html内容加载完毕,样式生成后再进行展示,避免一开始加载内容后,逐渐渲染样式造成的不良视觉效果,增强用户体验。 新增base-loading.js文件,代码如下 //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.d
easyui datagrid 大数据加载效率慢,优化解决方法
在使用easyui datagrid途中发现加载数据的效率真的不是一般的差。经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60 秒,就算在google浏览器测试结果也快不了几秒。 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受。 笔者只好百度,google解决方法,发现一篇文章说改 //1.3.3版本是这样的,其它版本也是这句...
Easyui Datagrid IE8下数据加载很慢,IE会被卡住的直接原因
设置datagrid的每一列的width属性,不用让他自适应,取消所有自适应的选项,会很大程度上提高easyui的显示效率,我试过在IE上显示500条数据,效率是能接受的。在firefox上显示2000条都是能接受的,但是IE上超过500条就无法忍受了,所以建议你在IE上一次不要超过300条数据。如果非要自适应的话,那就按比例来适应,先获取window的宽度winWidth,在winWid...
EasyUI之datagrid展示数据列表
写在最前: 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统,第一次接触到EasyUI的时候,往往会有一个大大的疑问,这EasyUI是如何做跳转的啊?增删改查都不知道如何下手了!但是当你知道有RestFul编程的时候。你会恍然大悟:我靠,RestFul+EasyUI简直就是绝配呀!博主就是如此:在写完一个增删改查之后,才发现EasyUI越学越有意思,页面都是靠局部刷新来动态展示数据,这...
Easyui_Datagrid更新行数据后,行按钮消失简单解决办法
如图: 当我编辑更新了datagrid一行中的数据,改行渲染的按钮就不见了。 使用reload方法,可以加载出来,但是又会吧全部数据给重新加载一遍,不想这样。 更新UI中的某个数据就好了,不必再去请求一次这么多数据。 所以,在 更新行数据后,再渲染一次按钮就好了。 $("#tab").datagrid("updateRow", { inde
jquery easyui datagrid性能优化
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
EasyUI datagrid 动态加载表格数据的方式
web HTML代码 <!-- Easyui引用css文件 --> <link type="text/css" href="../../../module/Easyui/css/easyui.css" rel="stylesheet" /> <link type="text/css" href="../../../module/Easyui/css/icon.css" rel
ssm框架—知识点记录(1):利用easyUi的datagrid 如何渲染得到嵌套数据 即: json格式二次渲染
这个是,后台得到json格式的数据,类型是双层嵌套的, 现在前端的需求是,页面显示本表ideas和user表的数据(多表联查);sql是left join on 然后,前端需要鼠标上移动,看到user表里的某些字段的详情。 easyui默认的表格渲染只能渲染到第一层的数据,即本表本字段,联表的数据无法显示,所以需要手动再次封装一下数据 做法:利用easyui封装的 formatter属性...
EasyUI常见几种控件动态渲染的示范代码
以下代码来自产品片段: 永远切记一个问题(坑惨我):事件绑定代码一定要编写在事件触发代码之前(触发的不是是绑定那个事件),否则等着玩死你吧,各种不稳定,各种不明报错:options of undefined.............. /*双击单元格时渲染控件处理*/ $("#template_analysis td[lb]").off().on("click dblclick",fun
【easyui】解决easyui闪屏问题
在最近的项目中,后台读取的数据,在前台渲染时需要一定的时间,这段时间内页面的格式混乱,但是过一会儿就会恢复。从用户的角度来看就是闪屏现象,点击之后总是要闪一下才能正常显示。为了增强用户体验,我们可以通过给所有页面增加一个遮罩层,弄出一个loading在转圈即可。前端代码如下: <div id='loadingDiv'style="position: absolute; z-index:
关于easyui datagrid 大量数据加载时 出现假死问题的解决方法
设置为false; 然后给的每一个都设置行宽。 因为easyui api中说 如果width 不设置的话,就需要自动匹配。这样 每一个单元格都需要去设置,当数据量大的时候 就会出现假死现象。
jQuery EasyUI中datagrid多列展示慢优化
最近工作中有个很大的报表,有70多列,用easyUI展示速度特别慢,chrome里需要3~4秒,但IE直接就会崩溃,查了些资料,最主要的原因就是jQUery EasyUI里需要对没列进行宽度设置,非常费时间。简单的优化办法如下: 设置fitColumns属性值为:false        每列设置固定的宽度,如果需要自适应宽度,每个宽度一样可达到效果。 领域 事项 序
EasyUI中DataGrid可编辑框一次全部赋值的问题
var $table=$("#DataGrid设置的id") var editIndex = undefined; function ClearLeValue() { //1、获取行 //2、编辑行,符合要求的赋值 //3、结束编辑行 //4、继续下一行 var flag = ""; $.e...
关于easyui datagrid 加载本地数据
所属单位                 专家姓名                 联系电话                 参检情况                 情况说明                                                 两个坑 1,必须要有class="easyui-datagrid"或者会报错找不到options
easyUI 重新加载表格数据
有的时候操作完添加、修改等一些操作之后需要刷新一下页面,需要把一些操作完之后的数据显示出来那就用到了这个功能。 $('#dg').datagrid('reload');   添加完这一句代码就可以实现数据实时刷新   想要获得更多资料的  请微信搜索公众号 【热血科技】,关注一下即可。    ...
EasyUI入门8 EasyUI在IE浏览器中渲染速度非常慢的解决办法
网上有两种做法
完美避免easyui datagrid加载两次数据
完美避免easyui datagrid加载两次数据 很久没有碰easyui了,但工作问题需要写个动态数据表,最近又因数据量特大而碰到这个问题,就记录一下。 其中问题为: 1、数据量过百万级别,且字段特别多,三十多列,加载的数据可想而知了,如果需要连表查询呢?呵呵。。。。。(就算是分页,每次加载两百条数据,也有几M了) 2、数据表的字段需要根据使用者的筛选而进行显示。 3、easyui有bug,da...
EasyUI中表格Datagrid合并单元格
“岁月无多人易老,乾坤虽大愁难著” 相信很多用过datagrid的同学都有这样的经历,就是合并单元格了。我今天也做了这个功能,在这里分享一下: 在研究了百度和官网上的说明之后,我写了如下代码: $('#testReportList').datagrid({ rownumbers:true, pageSize:25, pageList: [15,25...
easyui datagrid 加载慢的问题
easyui datagrid 加载慢的问题
easyui在ie下的优化方案
easyui的项目方案,在火狐、chrome以及最新版ie下可以正常渲染 但在臭名昭著的ie8以下浏览器确实非常慢,简直到了无法忍受的地步 但无奈项目需要兼顾ie6~8,故对此进行了研究,整理了优化方案 优化后虽不能达到火狐、chrome渲染的效率(此乃ie的硬伤),但速度已能提高好多倍
使用easyui,关于datagrid加载慢及layout里有datagrid时展开卡顿问题优化
        datagrid有个属性autoRowHeight,其作用描述为:“定义是否设置基于该行内容的行高度。设置为 false,则可以提高加载性能”,默认值为true。问题描述        当layout布局里有datagrid或treegrid时,若autoRowHeight设置为true,展开layout布局时可能出现卡顿情况,特别在datagrid的行记录数量大时更为明显。原因分...
Easyui Tab中的datagrid无法填充整个容器
【DataGrid无法填充整个容器】datagrid 设置属性: {fit:true} 还是无法填充这个tab容器,将table 的样式设置style=&quot;height:500px;width:500px&quot;还是无效是【解决方案】  将datagrid所在的父级标签(例如:easyui-tabs)将属性{fit:true}时问题解决,因为easui-tabs没有设置填充整个容器,只是设置了datagr...
easyui datagrid自定义按钮列,即最后面的操作列
在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现 首先是HTML部分 <table id="tt" class="easyui-datagrid" style="width:100%;height:554px" singleSelect="false" fitColumns="t
easyUI 动态生成表头,与动态绑定数据,实现代码
今天做了个动态生成表头的功能,和动态绑定数据。关键性代码如下,供大家参考 js 层面: $.ajax({         url: "trustReportTemplateController.do?getAllTrustColumnChinese", //获取表头         type: "get",         contentType: "applic
easyui控件验证+datagrid相关操作web练习源码
easyui的输入框+验证+弹窗,datagrid的渲染+勾选/选择+双击+渲染行操作+查询框架。
EasyUi 表格自定义列
以下是我学习EasyUi碰到的问题与解决方案 不说废话了。贴图:     效果图为: 如果要EasyUi的datagrid表格可以自定义列的话。就可以使用他自带的列属性formatter,它是一个单元格格式器函数。官方给出的例子为 也就是说。他是可以通过这个函数判断字段值及返回的值。所以我们也可以用它来返回自己需要的HTML元素。另外笔者也偶然发现一个小错误。就是假如他的不同
easyui在datagrid用formatter添加linkbutton后列表和行号错位
这是因为linkbutton的默认的linkbutton的默认调试为32px而datagrid的行调试的默认是25px导致的,解决办法在onLoadSuccess里面渲染linkbutton的同时加上height属性,小于25px就可以了。 类似这样$('[name=op]').linkbutton({text:'按钮',plain:true,iconCls:'icon-blank ',heig
easyui datagrid使用detailview无数据无法获取第一次插入的数据
EasyUI  dataGrid 使用 detailview  使用后如果表中没有数据,则添加数据失败。 如果表中已经有数据了。则新增数据没有问题。 加上下面的js代码就可以了 onLoadSuccess: function(data) { if(data.rows.length == 0){ var me = this;
关于easyui的datagrid加载两次的问题
除了网上流行的两种问题解决办法,还有以下这种   &amp;lt;table id=&quot;user_dg&quot;/&amp;gt;  以js方式加载datagrid   将html修改为 &amp;lt;table id=&quot;user_dg&quot;&amp;gt;&amp;lt;/table&amp;gt;  原因不详,忘高人指点 ...
jquery EasyUI datagrid:一次生成4个以上table时,frozencolumns显示不全问题修复
创建4个以上table,期望table可以上下左右滑动,发现easyui的datagrid可以轻松实现这个功能。但是table加载过程中,总有某个table的frozencolumns不能完全显示,具体如下图: 截图中前三列代码,名称,单位为冻结列,使用Chrome,右键选择检查元素,发现单位列其实是有值的。与其它正常显示的表格对比,发现EasyUI自动生成的html代码中,class=“p...
easyui datagrid初始化请求两次数据
问题:datagrid的时候并没有定义URL属性,仅在js中使用$('#sourceDG').datagrid({ url:projectName+&quot;/Source/getIndexSource&quot;, ···加载数据,但页面初始化datagrid的时候向后台发送了两次请求,获取数据的方法执行了两次。问题原因:定义了table 的属性 class=&quot;easyui-datagrid&quot;,同时js中初始...
springmvc+easyui datagrid 数据表格、数据表格分页
easyui可以说是我们后端程序员的好朋友了,在没用这个东西之前,我的页面都是用硬编码以及el表达式来循环的,做的很辛苦,后面自己学习了easyui之后,上手也比较快,都是中文,开发变的快了很多,数据表格可以用两种方式实现。 第一js式实现 前台js代码 $(function() { //渲染表格 $(&quot;#userListDG&quot;).datagrid({ title : &quot;用户...
dorado7.x datagrid设置横向滚动效果
两种方法: 1.设置datagrid属性fixColumn可以产生滚动效果。 2.设置datagrid属性:
解决easyUI-datagrid不显示的问题
最近项目中需要用到表格,使用  easyUI-datagrid。使用过程中发现了一个较为奇怪的问题,初始时将datagrid的display属性为none,之后点击某一个按钮后,再将display设置为block,可这是并没有把表格显示出来,只是出来一条竖线。      但这时如果将浏览器页面改变下大小,表格又显示出来了。      经过分析后发现,datagrid控件的长宽使用百分比
EasyUI 使用tabs切换后datagrid显示不了内容
今天刚遇到这个问题,找了下各群的深度合作伙伴,没有好的答案,那就自己研究吧。 问题点在于打开tab1时,快速切到tab2,这时tab1的datagrid渲染未完成,再次回到tab1,因为是在不可见区域完成的渲染,所以datagrid的窗体计算size时给的height为0。 解决思路:在tab重获焦点时,对datagrid resize一次。 在tabs的onSelect里注册事件,事件里面...