最近项目里用到了struts2里的jqGrid插件,有个很奇怪的问题找了好长时间，比如:字体样式修改不了的问题，具体描述请参考附件图片,包含有问题的和修改后的对比图(je不能直接插入本体图片啊)
就是grid的表头和内容字体样式不能修改，一直是缺省的16px大小和加粗的，并且分页显示也很别扭
后来找了好长时间发现是因为我的页面<!DOCTYPE 定义有问题，jqGrid支持过渡型的申明，也支持严格型的申明，不然某些时候jqGrid自带的css就会有问题,比如ui.jqgrid.css里定义的字体大小有可能不能控制页面里的所有字体大小.....
这是我之前的申明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 不能正常显示CSS
这是修改后的申明:
严格型XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
或是过渡性XHTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
其他的例如HTML的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
也行，后来发现只要是加了dtd定义的都能正常显示
建议用过渡型XHTML
以下是w3cschool里的对doctype的解释:
HTML <!DOCTYPE> 标签
定义和用法
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
以下面这个 <!DOCTYPE> 标签为例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在上面的声明中，声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
提示和注释：
注释：<!DOCTYPE> 标签没有结束标签！
HTML
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">
XHTML
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
XHTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD
当您希望使用框架时，请使用此 DTD！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
如需检查你是否编写了带有正确 DTD 的合法 XHTML 文档，您可以把您的 XHTML 页面链接到一个 XHTML 验证器。
- 大小: 44.5 KB
- 大小: 29.6 KB
分享到：
相关推荐
7. **响应式设计**：适应不同设备屏幕大小，确保在移动设备上也能良好展示。 8. **国际化**：支持多种语言，满足全球化需求。 通过 jqGrid，开发者可以快速创建功能强大的数据网格，提高项目的开发效率，同时提供...
- **社区支持**：jqGrid有活跃的社区和丰富的文档，遇到问题时更容易找到解决方案。 4. **应用场景** - **Web应用**：在企业级Web应用中，jqGrid常用于后台管理系统，展示和处理大量业务数据。 - **数据分析**：...
需要注意的是，为了统一页面上的字体大小，可能还需要额外添加一些CSS样式以确保与jQuery UI的字体大小保持一致。 #### 二、jqGrid皮肤配置 **2.1 皮肤支持** 从jqGrid 3.5版本开始，它全面支持jQuery UI的主题...
由于jQuery UI的字体大小可能与jqGrid默认的字体大小不匹配，因此需要在页面上添加额外的CSS样式来统一字体大小，确保整体风格的一致性。 jqGrid提供了丰富的搜索功能。你可以配置搜索工具栏，自定义搜索条件，实现...
jqGrid 和 jQuery UI 的字体大小可能不匹配，所以你可能需要在页面中添加自定义 CSS 来调整字体大小，以保持整体视觉一致性。 3. **jqGrid 皮肤**： 自 3.5 版本起，jqGrid 支持完整的 jQuery UI 主题。你可以从...
jqGrid是一款广泛应用于Web开发中的JavaScript数据网格组件，它基于jQuery库，专为展示和管理大量数据而设计。jqGrid 3.5.alfa-2是这个组件的一个早期版本，包含了一些新特性和改进，同时也提供了官方的示例和文档以...
- 调整样式以适应两者结合后的界面需求，如调整字体大小、间距、边框等。 - 优化性能，例如使用`.no_legacy_api`和`.useJSON`来优化jqGrid的渲染效率和数据处理方式。 - 进行适当的事件绑定和交互逻辑设计，确保Tabs...
由于`jquery-ui`的字体大小可能与`jqGrid`的不一致，因此还需要通过添加CSS样式来统一页面上的字体大小。 #### 三、jqGrid皮肤设置 从3.5版本开始，jqGrid完全支持jQuery UI的主题（Theme）。开发者可以从[jQuery ...
在压缩包中，"css"目录包含jqGrid的样式文件，这些文件定义了表格的布局、颜色、字体等视觉元素，使得开发者可以根据项目需求自定义表格的外观。"js"目录则包含了核心的jQuery和jqGrid JavaScript库，提供了所有功能...
此外，由于JQGrid和jQuery UI的字体大小可能不一致，所以可能需要添加额外的CSS来调整页面文本的大小。 JQGrid的皮肤支持从3.5版本开始，完全兼容jQuery UI的主题。用户可以从jQuery UI的Themeroller网站下载所需的...
它控制着网页的布局，如颜色、字体、大小、位置等视觉元素。通过CSS，开发者可以实现响应式设计，使网页适应不同设备的屏幕尺寸，提高用户体验。 2. **Div**：在HTML中，`div`元素是一个通用容器，用于组织页面上的...
2. **响应式设计**：适应不同设备屏幕大小，保证在手机、平板和桌面端都有良好的显示效果。 3. **事件管理**：提供日期选择、拖拽事件等功能，便于用户进行日程安排。 4. **数据绑定**：可与后端数据库无缝对接，...
3. **弹出框**：jQuery UI 的 Dialog组件是一个强大的弹出框解决方案，可以用于创建模态或非模态对话框，支持拖动、调整大小、标题、按钮等多种功能。这对于展示警告信息、获取用户输入或者展示详细内容非常有用。 ...
在这里，它可能包含一个`style.css`文件，用于定义搜索框的样式，比如宽度、高度、边框、背景色等，以及下拉提示框的样式，如位置、大小、颜色、字体等。CSS还可以通过伪类（如`:hover`和`:focus`）来实现当鼠标悬停...
这包括但不限于排序、分页、过滤、搜索、自定义样式等功能。开发者可以通过jQuery插件如DataTables或jqGrid来快速构建交互式表格。 在创建jQuery Table时，我们需要遵循以下步骤： 1. 引入jQuery库：确保在HTML...
传统上，分页功能往往需要通过全页面刷新来实现，这会带来用户体验不连贯、页面加载缓慢等问题。基于jQuery的无刷新分页技术可以有效解决这些问题，它通过在客户端进行数据的局部加载和处理，实现了无需刷新整个页面...
7. **插件使用**：虽然这里没有提及具体的jQuery Table插件，但jQuery社区提供了许多优秀的插件，如DataTables、jqGrid等，它们提供了丰富的表格功能，包括排序、分页、过滤等，适用于复杂的表格需求。 8. **文件...