easyui的datagrid网格错位 2C

加载完成后就是出现这种错位现象,但是只要调整一下就会全部对齐
行的宽度也设置了,但是无论宽度设置多少,头部数据的宽度总是会比内容数据的宽度宽一点
表格是采用的加载本地json文件的方式

html

 <input id="cc" name="dept" value="01">

js代码

 $('#cc').datagrid({
    idField: 'location',
    url: 'data.json',
    columns: [
        [
            { field: 'location', title: '位置', align: "center", width: 120, rowspan: 2 }, 
            { title: '类别', halign: "center", colspan: 6 },
            { field: 'year', title: '统计年份', align: "center", width: 120, rowspan: 2 },
        ],[
            { field: 'warnning', title: '警示桩(根)', align: "center", width: 120, },
            { field: 'cover', title: '水泥盖板(个)', align: "center", width: 120, },
            { field: 'sign', title: '标志牌(个)', align: "center", width: 120, },
            { field: 'pillar', title: '立柱(根)', align: "center", width: 120, },
            { field: 'net', title: '铁丝网(平方米)', align: "center", width: 120, },
            { field: 'stone', title: '路缘石(米)', align: "center", width: 120, },
        ]
    ],
});

json

 {"rows":[
    {"location":"k3467-K3468", "warnning":"20", "cover":"13", "sign":"24", "pillar":"15", "net":"667", "stone":"3000", "year":"2016-3"},
    {"location":"k3468-K3469", "warnning":"12", "cover":"23", "sign":"34", "pillar":"45", "net":"467", "stone":"5000", "year":"2015-3"},
    {"location":"k3470-K3471", "warnning":"54", "cover":"34", "sign":"56", "pillar":"76", "net":"657", "stone":"3000", "year":"2015-7"},
    {"location":"k3475-K3476", "warnning":"23", "cover":"53", "sign":"264", "pillar":"165", "net":"467", "stone":"5600", "year":"2016-3"}
  ]
}
0

3个回答

改为

试试
0

《input id="cc" name="dept" value="01"》改为《table id="cc" name="dept" value="01"》《/table》
把尖括号替换成英文格式
试试

0
qq_22267353
cjchnvs 试过了,还是不行....
2 年多之前 回复

onLoadSuccess事件中调用fitColumns方法试试

 onLoadSuccess:function(){$(this).datagrid('fitColumns')}
0
qq_22267353
cjchnvs 还是错位的。。
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
easyui datagrid表头与内容错位
$('#funds-list-data').datagrid(rn url:'fundsAction!fundslist.action',rn iconCls:'icon-edit',rn fit:true,rn columns:[[rn field:'createTime',title:'创建时间',width:fillsize(0.1),align:'center',rn field:'projectName',title:'项目名称',width:fillsize(0.2),align:'center',rn field:'principalPersonName',title:'负责人',width:fillsize(0.1),align:'center',rn field:'fundsSource',title:'经费来源',width:fillsize(0.1),align:'center',rn field:'fundsBudget',title:'经费预算',width:fillsize(0.15),align:'center',rn field:'fundsUsed',title:'已用经费',width:fillsize(0.1),align:'center', rn field:'fundsSurplus',title:'剩余经费',width:fillsize(0.1),align:'center' rn ]],rn rownumbers:true,rn remoteSort:false,rn singleSelect:true, rn pagination:true,rn pageSize:20,rn pageList:[20,40,60,80,100],rn onSortColumn:function(sort,order)rn $("#funds-list-data").datagrid('load'); rn ,rn onLoadSuccess: function (row,data) rnrn rn);rnrn数据读出来以后有时候表头和内容会错位(IE8 谷歌和火狐是好的) fillsize()是自己定义的函数
easyui 创建数据网格(DataGrid)
easyui 创建数据网格(DataGrid)
easyui datagrid 表头错位 宽度没有撑满
[img=https://img-bbs.csdn.net/upload/201507/29/1438164550_855178.png][/img]rnrnrnrnrn[img=https://img-bbs.csdn.net/upload/201507/29/1438164657_402145.png][/img]
EasyUI datagrid 左侧行号出现错位
前言:针对datagrid 左侧行号错位解决实现。 问题描述:表格第一行中某个单元格内容过多导致左侧行号与行不匹配,出现错位。 解决方法: 如果在单元格中有操作的事件,则在事件结束末尾调用 $('#tab').datagrid('fixRowHeight')  重新固定下表格, 如果是初始化单元格的情况下,则在onLoadSuccess 中调用 $('#tab').da
关于EasyUI Datagrid 数据网格使用策略
每天一小步前进一大步,记录一下前段时间使用的EasyUI数据网格。话不多说,上图。 ![第一页](http://img.blog.csdn.net/20160926094650920) ![第二页](http://img.blog.csdn.net/20160926094813949) 一、创建数据网格 参考官网的说明,有两种创建方法,本人亲测使用的是第二种,采用javascript 创建数据
EasyUI Datagrid 数据网格实现模糊查询多列
一、需求 点击往来辅助下拉列表会出现ObjectNo-编号 与ObjectNameC-名称,在输入框里输入编号或者中文汉字都可以查询到当前匹配的行。 二、实现 1、html部分 &lt;table id="dg" class="easyui-datagrid" name='dept' style="width:100%;height:auto" data-o...
Easyui 数据网格详细视图(DataGrid DetailView)
数据网格详细视图,如图 一、页面上引入脚本      可以百度下载 二、写table 三、初始化table为datagrid,并且初始化详细视图 $(function () { $('#dg').datagrid({ fit: true,
Easyui Datagrid 数据网格---我的使用
使用方法1.在HTML中加入一个空table(这只是其中一种方法 )<table id="tableId"></table>2.在js中调用<script> $("#tableId").datagrtid({ /*在这里进行初始化*/ }); </script>3.花括号中对table进行初始化,之中有很多属性网上能查到这里不就详细描述每个属性的意义和作用了,不过需要注
使用js动态创建easyui的datagrid(网格)
1·先在body中创建一个table或div并声明id,而且要让页面加载时执行创建datagrid的function方法: &amp;lt;body onload=&quot;mes()&quot;&amp;gt; &amp;lt;table id=&quot;message&quot;&amp;gt; &amp;lt;/table&amp;gt; &amp;lt;/body&amp;gt; 2.定义function方法   funtion mes(){ //使用j...
EASYUI学习DataGrid数据网格之CRUD(二)
&amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&amp;gt; &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&a
5,EASYUI网格
太大块 &amp;lt;!-- 增删改查,冻结,多选,拓展,阅读器 --&amp;gt; &amp;lt;div align=&quot;center&quot;&amp;gt; &amp;lt;table id=&quot;dg&quot; title=&quot;My Users&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:800px;&quot; url=&quot;${base}/user/getUser
easyUI数据网格 简写
为什么要简写呢? 在开发中有N多页面且columns field 又很多。简写就方便多了。正常的写法。$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',wi
EasyUI 属性网格
属性网格(propertygrid)为用户提供李露兰和编辑属性的接口。属性网格是内联编辑的数据网格。它相当容易使用。用户可以很容易就创建一个可编辑属性的分层列表和表示任何数据类型的项目。属性网格带有内置的排序和分组特征。 1、用法 (1)、在标记中创建一个属性网格(propertygrid)。请注意,列是内置的,不需要再次声明。 <table id="pg" class="easyui-pr
EasyUI 组合网格
组合网格(combogrid)把可编辑的文本框和下拉数据网格面板结合起来,用户可以从下拉数据网格面板中快速查找和选择。组合网格(combogrid)提供了选择某个项目的键盘导航支持。 1、用法 (1)、从标记创建组合网格(combogrid)。 <select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
easyui启用行号错位解决方案
$("#dataGrid").datagrid({ onLoadSuccess : function () { $(this).datagrid("fixRowHeight"); } });加入上面的代码就可以解决!
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的初次点击出现的重叠错位问题
先上问题的效果图 由上图可以知道,当点击按钮的时候,会出现详情页将下面的数据挤出到别的位置,正确的效果图,应该是这样子的: 我们来看代码是怎么写的: view: detailview, detailFormatter:function(index,row){
easyui页面缩小的时候,datagrid 行号跟内容错位
fit:false  设置这个就可以解决
easyui datagrid合并行进入可编辑模式错位问题
easyui datagrid合并行进入可编辑模式错位问题,只需要在每次结束行编辑时,重新设定行合并即可。 加载datagrid: $("#datagrid").datagrid({ rownumbers : false, pageSize : 100, pageList : [100 ,200], pagination : false, singleSelec
easyui datagrid 嵌套datagrid
easyui datagrid 嵌套datagrid form 简单提交 ,刷新子表数据
easyui的datagrid
NULL 博文链接:https://669341085.iteye.com/blog/758832
easyui datagrid
easyui datagrid 怎么 能把它收起,当点击一个按钮时,收起数据表格
easyui datagrid 子网格的折叠问题(在展开一个子网格时折叠上一个展开的子网格)
有时候需要在一个datagrid里加入子网格,显示其他信息。如果在同时展开多个子网格且对其展开的子网格进行操作,可能会引起一些操作歧义,特别是datagrid可以多选时。为了避免这种歧义,就需要在展开一个子网格时先折叠上一个子网格。       onExpandRow:function(index,row){ var rows = $('#users_community_list
【EasyUI】EasyUI右下角窗口+datagrid
本文介绍了EasyUI中如何加载右下角窗口并展示datagrid数据。
关于easyui中datagrid数据网格与form表单的使用总结
1、表单中name属性的定义要求:name属性值要与datagrid中的valueField属性值同名 好处: 提交表单的时候会将表单中的元素值自动存储起来,而不用我们手动获取每一个元素的值后 再使用param参数来传递; 如果自定义了name属性 而后又使用param参数获取元素值进而传递 这种方式可能会造成服务器端获取到的参数值相叠加(如元素name的值为“aa”,但服务器通过Reque
Easyui datagrid数据网格 过滤插件和分页冲突,解决办法。
  最近我在写一个高校共享单车系统项目,前端页面使用的是EasyUI,在我写完datagrid并弄好过滤和分页后,发现能过滤数据,但是按分页按钮毫无反映,解决办法: 解决办法很简单,只需把你写的查找sql语句中的 limit语句去掉,因为使用了easyui filter后是在本地过滤的不用经过数据库,所以要查找全部。  ...
easyui datagrid数据网格的条件查询-最简便方法
上次写项目适合想在easyui datagrid里放入条件查询,试了很多种方法,由此总结出的最佳选择。&amp;lt;div id=&quot;tb&quot; style=&quot;padding: 3px&quot;&amp;gt; &amp;lt;span&amp;gt;课程名:&amp;lt;/span&amp;gt; &amp;lt;select id=&quot;loadCourse&quot; onchange=&quot;selectCourse()&quot; class=&a
关于EasyUI Datagrid 数据网格渲染数据过慢
width,列的宽度。如果未定义,则宽度会自动扩展以适应它的内容。没有定义宽度将会降低性能; nowrap boolean 设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。 默认为 true autoRowHeight boolean 定义是否设置基于该行内容的行高度。设置为 false,则可以提高加载性能。默认为 true
easyui——datagrid(数据网格)对于浏览器窗口自适应的解决
页面中的datagrid加载后,datagrid的width(宽度)不会再跟随浏览器窗口大小改变而改变需求:使页面中的datagrid加载后,datagrid的width(宽度)跟随浏览器窗口大小改变而改变,并自适应各种显示器 需求:使页面中的datagrid加载后,datagrid的width(宽度)跟随浏览器窗口大小改变而改变,并自适应各种显示器 适配宽度的函数 //适配各种尺寸的显示器 ...
easyui的数据网格显示数据
项目ssm(spring+springmvc+mybatis) 编译工具:eclipse 后台框架:easyui 因为easyui数据网格显示的是一种json格式数据: { &quot;total&quot;:1, &quot;rows&quot;:[ {&quot;productid&quot;:&quot;FI-SW-01&quot;,&quot;productname&quot;:&quot;Koi&quot;,&quot;unitcost&quot;:10.00,&quot;stat
vc++更换打印机后网格和波形错位
大家好,我用VC++编写了一段报告程序,里面包含文字,网格和波形,使用东芝的打印机没有问题,但当我更换打印机后发现网格和波形大小位置全部发生变化,根本没法再用,而文字位置显示正常,请问各位高手我该如何解决这个问题?谢谢rn我是在OnPrint(CDC* pDC, CPrintInfo*)函数中编写的代码
DataGrid的网格更新问题
下面这段代码是我在Visual Studio.net里做的程序,目的是点击窗体上的buttonShowAll按钮显示数据库内容,点击窗体上的buttonUpdate按rnrn钮保存在DataGridInvoice里所做的更改到数据库,结果是当我先点击buttonShowAll按钮一切正常,然后修改数据网格中的内容,然后点击rnrnbuttonUpdate按钮后,数据库中的每一条记录都变成了我修改过的那一个网格所对应的记录的内容,好可怕,而我的目的只想更改网格的内容rnrn,程序语法没有问题,可是逻辑上一点都不对,我对DataGrid控件的更新操作刚刚接触,尤其是OleDbParameter,还望各位大侠悉心指点,谢谢rnrn!rnrnusing System;rnusing System.Drawing;rnusing System.Data;rnusing System.Data.OleDb;rnusing System.Collections;rnusing System.ComponentModel;rnusing System.Windows.Forms;rnrnnamespace Invoicernrn /// rn /// InvoiceUpdate 的摘要说明。rn /// rn public class InvoiceUpdate : System.Windows.Forms.Formrn rn private System.Windows.Forms.DataGrid dataGridInvoice;rn private System.Windows.Forms.Label labelTitle;rn private System.Windows.Forms.Button buttonShowAll;rn private System.Windows.Forms.Button buttonUpdate;rn //这里可能是出问题的地方rn DataSet ds;rn OleDbDataAdapter da;rn /// rn /// 必需的设计器变量。rn /// rn private System.ComponentModel.Container components = null;rnrn public InvoiceUpdate()rn rn //rn // Windows 窗体设计器支持所必需的rn //rn InitializeComponent();rnrn //rn // TODO: 在 InitializeComponent 调用后添加任何构造函数代码rn //rn rnrn /// rn /// 清理所有正在使用的资源。rn /// rn protected override void Dispose( bool disposing )rn rn if( disposing )rn rn if(components != null)rn rn components.Dispose();rn rn rn base.Dispose( disposing );rn rnrn #region Windows Form Designer generated code//已被略去rn rn private void buttonShowAll_Click(object sender, System.EventArgs e)//单击按钮显示显示数据库内容rn rn string Src="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=Invoice.mdb";rn string Invoice="SELECT 购货单位,日期,货名及规格,单位,数量,单价,金额,图片位置,备注 FROM invoice";rn OleDbConnection conn=new OleDbConnection(Src);rn da=new OleDbDataAdapter(Invoice,conn);rn ds=new DataSet();rn da.Fill(ds,"invoice");rn dataGridInvoice.SetDataBinding(ds,"invoice");rn rnrn private void buttonUpdate_Click(object sender, System.EventArgs e)//单击按钮更新在DataGridInvoice里更改的记录rn rn string Src="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=Invoice.mdb";rn string Upt="UPDATE invoice SET 购货单位=@购货单位,日期=@日期,货名及规格=@货名及规格,单位=@单位,数量=@rnrn数量,单价=@单价,金额=@金额,图片位置=@图片位置,备注=@备注";rn OleDbConnection conn=new OleDbConnection(Src);rn da.UpdateCommand=new OleDbCommand(Upt,conn);rn OleDbParameter Para;rn Para=da.UpdateCommand.Parameters.Add("@购货单位",OleDbType.Char);rn Para.SourceColumn="购货单位";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@日期",OleDbType.Char);rn Para.SourceColumn="日期";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@货名及规格",OleDbType.Char);rn Para.SourceColumn="货名及规格";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@单位",OleDbType.Char);rn Para.SourceColumn="单位";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@数量",OleDbType.Char);rn Para.SourceColumn="数量";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@单价",OleDbType.Char);rn Para.SourceColumn="单价";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@金额",OleDbType.Char);rn Para.SourceColumn="金额";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@图片位置",OleDbType.Char);rn Para.SourceColumn="图片位置";rn Para.SourceVersion=DataRowVersion.Current;rn Para=da.UpdateCommand.Parameters.Add("@备注",OleDbType.Char);rn Para.SourceColumn="备注";rn Para.SourceVersion=DataRowVersion.Current;rn da.Update(ds,"invoice");rn rn rnrnrn我想是不是应该在上面buttonUpdate_Click事件语句中通过判断修改过的网格所在的行和列位置来修改Para的值,怎么实现我一点都不会,各rnrn位帮帮忙啊,保证100分给!
DATAGRID网格的变动问题
我想让DATAGRID网格中的尺寸不能移动,请问怎样做呀,就是用户不能用鼠标移支、rn来改变DATAGRID中的网格的尺寸呀
在datagrid网格中加载图片
兄弟们你们好!怎样在asp.net,和vb.net的datagrid网格中加入图片,如相片rn(注意:数据库(sql server)存入的是二制数,如我要显示每位员工的相片
DataGrid 嵌套网格
DataGrid 控件的嵌套显示数据.在一个DataGrid控件中,每一行记录展开后可以显示关联的子表记录,在父DataGrid控件中显示另一个DataGrid控件. 并且可以分页显示.
打印datagrid数据网格
我做了一个datagrid数据网格。现想把这个网格中的数据打印出来请问大哥大姐们怎样实现?谢谢rn注:datagrid网格数据有四十多条。全部打印出来。请回复源代码。
ActiveX网格控件(DataGrid)
VC++环境rnCAxWindow(通用容器类)rnQueryControl(CAxWindow的成员函数)rn对ActiveX网格控件(DataGrid)进行操作rnrnHRESULT QueryControl( REFIID iid, void** ppUnk );这个成员函数的两个参数怎么传?rnrn
DataGrid网格的操作
我想让DataGrid列标头字段名与表中的字段名一样.该怎么实现?
easyui datagrid插件 datagrid-detailview.js
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
easyUI的dataGrid重画
实现dataGrid的自定义搜索框,以及对默认16x16按钮重绘到48x48