<!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象,这个DOM上其实承载了panel组件-->
<div class="panel datagrid">
<!-- datagrid的标题区域容器,对应于panel组件的header部分,可以使用$(target).datagrid('getPanel').panel('header')得到这个DOM对象-->
<div class="panel-header">
<div class="panel-title"></div>
<div class="panel-tool"></div>
</div>
<!-- datagrid的主体区域容器,对应于panel组件的body部分,可以使用$(target).datagrid('getPanel').panel('body')得到这个DOM对象-->
<div class="datagrid-wrap panel-body">
<!--工具栏-->
<div class="datagrid-toolbar"></div>
<!-- datagrid视图部分的容器,这是datagrid组件DOM结构的核心,其基础视图结构跟datagrid的view属性无任何关系。-->
<!-- 对应dc.view -->
<div class="datagrid-view">
<!-- div.datagrid-view1负责展示冻结列部分(包含行号或者frozenColumns)的数据-->
<!-- 对应dc.view1 -->
<div class="datagrid-view1">
<!--列标题部分-->
<div class="datagrid-header">
<!-- 对应dc.header1 -->
<div class="datagrid-header-inner">
<!--样式里有htable关键字,h代表header的意思-->
<table class="datagrid-htable">
<tbody>
<tr class="datagrid-header-row"></tr>
</tbody>
</table>
</div>
</div>
<!--列数据部分-->
<div class="datagrid-body">
<!-- 对应dc.body1 -->
<div class="datagrid-body-inner">
<!--frozenRows部分(有数据才会有这个table,故不属于基础DOM结构),固定行是1.3.2版本之后才加的功能,注意datagrid-btable-frozen关键样式,btable代码body table的意思-->
<table class="datagrid-btable datagrid-btable-frozen"></table>
<!--普通rows部分(有数据才会有这个table,故不属于基础DOM结构)-->
<table class="datagird-btable"></table>
</div>
</div>
<!--footer部分-->
<div class="datagrid-footer">
<!-- 对应dc.footer1 -->
<div class="datagrid-footer-inner">
<!--ftable代表footer table的意思-->
<table class="datagrid-ftable"></table>
</div>
</div>
</div>
<!-- div.datagrid-view2负责展示非冻结列部分的数据,大家注意到冻结列和普通列视图是分开的,也就是说冻结列和普通列是在不同表格中展示的,这样会产生一个问题,那就是两个表格行高之间的同步问题。-->
<!-- 对应dc.view2 -->
<div class="datagrid-view2">
<!--列标题部分-->
<div class="datagrid-header">
<!-- 对应dc.header2 -->
<div class="datagrid-header-inner">
<table class="datagrid-htable">
<tbody>
<tr class="datagrid-header-row"></tr>
</tbody>
</table>
</div>
</div>
<!--列数据部分,注意这里并无datagrid-body-inner这个子元素,而冻结列对应的body却是有的,这个是细微区别-->
<!-- 对应dc.body2 -->
<div class="datagrid-body">
<!--frozenRows部分有数据才会有这个table,故不属于基础DOM结构,固定行是1.3.2版本之后才加的功能,-->
<table class="datagrid-btable datagrid-btable-frozen"></table>
<table class="datagrid-btable"></table>
</div>
<!--footer部分-->
<div class="datagrid-footer">
<!-- 对应dc.footer2 -->
<div class="datagrid-footer-inner">
<table class="datagrid-ftable"></table>
</div>
</div>
</div>
</div>
<!--分页部分-->
<div class="datagrid-pager pagination"></div>
</div>
</div>

datagrid 完整dom结构的更多相关文章

  1. jQuery EasyUI Datagrid组件的完整的基础DOM结构

    标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...

  2. 提高测试脚本复用性降低DOM结构引起路径变化的影响

    问题描述 在定位元素时直接复制的xpath. 但是因为下面这些原因导致之前引用的路径失效, 不得不频繁修改脚本重新定位元素, 大降低了脚本的复用性, 也增加了维护的成本: 1. UI修改 (比如增加了 ...

  3. DOM2级提供的对DOM结构执行深度优先遍历 笔记

    NodeIterator和TreeWalker这2个类型可以基于给定的起点对DOM结构执行深度优先遍历.(我测试用的浏览器是Chrome,介绍说IE不支持DOM遍历,但是不知道最新的IE支持不支持) ...

  4. js实现DOM结构

    /* 编写一段js脚本生成下面的DOM结构.要求使用标准的DOM方法或属性 <div id='example'> <p class='slogan'>淘,你喜欢</p&g ...

  5. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  6. DOM结构及优化

    1.DOM树中三种常见的DOM节点: 1>元素节点:上图中<a>,<h1>等都是元素节点,即标签 2>文本节点:向用户展示的内容,如...中的"文档标题& ...

  7. 怎样确保页面中的js代码一定是在DOM结构生成之后再调用

    有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: <head> <script> console.log(document.bod ...

  8. App自动化之dom结构和元素定位方式(包含滑动列表定位)

    900×383 38 KB 先来看几个名词和解释: dom: Document Object Model 文档对象模型 dom应用: 最早应用于html和js的交互.界面的结构化描述, 常见的格式为h ...

  9. Aspose.words一 DOM结构

    2.文档对象模型概述 2.1 DOM介绍 Aspose.Words的文档对象模型(以下简称DOM)是一个Word文档在内存中的映射,Aspose.Words的DOM可以编程读取.操作和修改Word文档 ...

随机推荐

  1. python Django Ajax基础

    升级版: ajax 创建多对多以及增加示例: views中的接收

  2. BZOJ2663 [Beijing wc2012]灵魂宝石

    Description 平面中有\(n\)个黑点和\(n\)个白点.这些点组成\(n\)对,但是你不知道它们的对应关系.若某队中黑点白点距离\(<R\),则它是好的:\(>R\)则不是好的 ...

  3. js-权威指南学习笔记13

    第十三章 Web浏览器中的JavaScript 1.在客户端JS中,window对象也是全局对象. 2.window对象中其中一个最重要的属性是document,它引用Document对象. 3.JS ...

  4. springboot中使用自定义的properties属性

    在application.properties中添加属性ai.name=明ai.age=22ai.sex=男定义配置类如下,前缀(prefix)可自定义修改,本文为 ai.@Configuration ...

  5. angularjs ui-view多视口多层嵌套路由配置

    最近研究了一下ui-view多层嵌套,整理了一下 1.最简单的ui-view用法 html部分: <ul class="nav navbar-nav"> <li ...

  6. flutter Row里面元素居中显示

    直接上代码: new Expanded( flex: , child: new Row( children: <Widget>[ Expanded( child: new Containe ...

  7. BootStrap selectpicker后台动态绑定数据

    项目使用BootStrap设置select时,不能动态加载,使用以下方法可以解决. //获得全部订单信息(订单ID,订单名称) function GetAllOrders(obj) { $.ajax( ...

  8. 64位win10系统中无法开启vmware的VT-X嵌套虚拟化功能的解决方法

    在升级了win10操作系统之后,发现Vmware Workstation在安装64位操作系统虚拟机的或者要使用Intel VT-X/EPT的时候,会一直弹出vt-x被禁用的提示,如下图:       ...

  9. JVM知识(五):垃圾回收算法

    在介绍垃圾回收算法之前,我们需要先了解一个词“stop the world”,stop the world会在执行某一个垃圾回收算法的时候产生,JVM为了执行垃圾回收,会暂时java应用程序的执行,等 ...

  10. LeetCode题解之Add Strings

    1.题目描述 2.问题分析 直接按照加法运算规则运算即可,注意进位问题. 3.代码 string addStrings(string num1, string num2) { if( num1.emp ...