Bootstrap嵌入jqGrid，使你的table牛逼起来

一、效果展示

二、资源准备

三、主要内容

在本篇博客中，我将主要讲解如何在Bootstrap中嵌入jqGrid的关键技术。我们会涉及以下几个方面：

1. jqGrid在Bootstrap中的布局方案：如何使jqGrid与Bootstrap的网格系统完美融合，实现响应式布局。

2. jqGrid自身的构造化参数：深入了解jqGrid的各种参数设置，根据你的需求进行定制化配置。

4. jqGrid的数据操作：如何实现对数据的增删改查，以及如何进行数据分页、排序等操作。

在讲述这些内容时，我会尽量提供详细的思路和部分代码，帮助你更快地掌握这项技能。但受限于篇幅，某些细节和完整代码将在博客中省略，敬请谅解。

我想说的是，学习任何技术都需要主动性和实践性。虽然我非常愿意分享我的知识和经验，但我更希望你能够在实践中去和发现，只有这样，你才能真正掌握这项技术，并将其转化为自己的东西。希望这篇博客能为你带来一些启示和帮助，如果你有任何疑问或建议，欢迎在评论区留言交流。jqGrid在Bootstrap中的优雅布局方案

HTML结构如下：

```html

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@ include file="/components/common/taglib.jsp"%>

<%@ include file="/components/common/csslib.jsp"%>

<%@ include file="/components/common/jslib.jsp"%>

```

以下是关于该布局方案的说明：

1. 使用Bootstrap的`container`类包裹整个页面，确保布局的稳定性。

4. `jqGridPager`是jqGrid的分页器，用于数据的分页展示。同样，你可以通过配置来实现不同的分页效果。

=========================

一、通过rel指定form的id：更便捷的检索体验

二、jqGrid的构造化参数：灵活配置，轻松实现功能扩展

-

--

jqGrid的奥秘：一个数据展示与操作的强大工具

对于不熟悉jqGrid的开发者来说，初次接触可能会有些迷茫。但一旦深入了解，你会发现它是一个功能强大、灵活多变的数据展示和操作工具。如果你正在寻找一种能够展示大量数据并允许用户进行操作的解决方案，那么jqGrid可能是你的理想选择。

在这个例子中，我们使用了jqGrid来展示一个订单系统的数据。我们定义了各种列，包括订单号、项目名称、下单时间、支付金额等等。我们还根据订单的状态，提供了不同的操作选项，比如支付、查看详情、确认收货等。这一切都是通过jqGrid来实现的。

jqGrid还支持分页、排序、筛选等功能，这使得用户可以更加方便地查看和操作数据。它还支持多种响应方式，包括POST和GET请求，这使得它可以适应各种不同的应用场景。

如果你是一个经验丰富的开发者，你会发现jqGrid的官方文档和demo是你的宝贵资源。这些资源可以帮助你深入了解jqGrid的各个方面，包括如何自定义列、如何读取数据、如何处理用户操作等等。jqGrid还提供了丰富的回调函数和事件，可以让你根据需要定制你的应用。

jqGrid是一个强大的数据展示和操作工具，无论你是初学者还是经验丰富的开发者，都可以通过它来实现你的需求。如果你正在寻找一种能够展示大量数据并允许用户进行操作的解决方案，那么不妨尝试一下jqGrid吧！在这个例子中，我们使用了jqGrid来构建了一个订单系统，展示了它的强大和灵活性。我们相信，无论你的需求是什么，jqGrid都能帮助你实现。在整合jqGrid与Bootstrap的旅程中，我将为你详细介绍一些关键步骤和注意事项，而不过多涉及jqGrid的详细特性。我们的目标是将jqGrid无缝嵌入到Bootstrap框架中，以提升用户体验并优化页面布局。

让我们聚焦于如何巧妙使用formatter函数。在jqGrid中，formatter是一个强大的工具，它允许你格式化单元格的内容。对于使用XML数据格式的jqGrid（即datatype设置为“xml”），你可以通过jQuery选择器获取特定单元格的值。例如，你可以通过$(rowObject).find("deal_id").text()来获取名为“deal_id”的列的值。这里的rowObject代表了当前行的jQuery对象。

紧接着，我们来看看xmlReader的配置。在XML数据时，确保设置repeatitems为false，并指定root为“PageGrid”。这个配置确保了jqGrid能够正确来自后台的XML数据。

接下来，让我们footerData方法。这个方法允许你在jqGrid的页脚部分显示自定义数据。例如，你可以使用$("pageGrid").footerData("set", {image_str : "支付总花费", order_price : json.message});来设置页脚的数据。这将为页脚添加“支付总花费”和从json对象中获取的消息内容。

深入了解initUI方法

在前端开发中，initUI是一个常见的函数，用于初始化用户界面。在我所参与的项目中，大部分模板都是基于dwz框架。感谢这些前辈们的付出，使得我们的开发更加便捷。

今天，我们要深入initUI方法中的一部分功能，特别是与jqGrid相关的部分。jqGrid是一个用于显示和操作数据的jQuery插件，广泛应用于Web开发中。

当我们调用initUI函数时，它会接收两个参数：_box和jqOption。_box指定了初始化UI的DOM元素，jqOption则包含jqGrid的配置选项。

在函数中，我们首先通过$("pageGrid").attr("rel")获取与jqGrid关联的form表单。这个form表单包含了检索条件。我们通过serializeArray()方法获取表单中的检索域值。

接下来，我们需要处理这些检索域值，以便将它们与jqGrid的配置选项一起传递给后端。这里的关键是，我们需要同时传递分页、排序的相关字段（如page、rows、sord、sidx）和表单的检索域值。

为了解决这个问题，我们使用array2obj方法将表单数据对象化。这个方法会将表单数据转换为一个对象，使得我们可以方便地通过jqGrid的postData选项将其传递给后端。

然后，我们使用$.extend方法合并默认的jqGrid配置选项和自定义的选项。这样，我们就可以将表单的检索域值和分页、排序的相关字段一起上送到后端。

我们还为检索按钮添加了click事件处理函数。当点击检索按钮时，我们会重新加载jqGrid的数据。

我们还通过jQuery的each方法遍历form表单中的按钮元素，并使用css方法将它们的圆角去掉。这样做是为了使按钮样式更加贴合jqGrid的样式。

initUI方法是初始化用户界面的关键函数，特别是与jqGrid相关的部分。通过深入了解其工作原理和细节，我们可以更好地将其应用于实际项目中，提升用户体验。

希望这篇文章能够帮助你更好地理解initUI方法和jqGrid的使用，如果有任何疑问或需要进一步讨论的地方，欢迎随时与我联系。在数据处理的世界里，jqGrid扮演着关键的角色，特别是在数据操作方面。它的功能丰富，能够满足各种复杂的数据处理需求。今天，我们来深入一下jqGrid中的数据操作部分，主要涉及检索参数传递、分页排序参数传递以及sql语句的编写。

让我们关注参数传递。前端参数在之前的部分已经有所介绍，那么，在controller中如何处理这些参数呢？我们需要定义一个PageGrid类，它是jqGrid中xmlReader的数据源。这个类包含了数据操作所需的各种参数。

在Java代码中，我们定义了一个名为PageGrid的包（package）.honzh.mon.page。这个类有四个主要属性：page（当前页数）、total（总页数）、records（记录数）以及data（数据列表）。每个属性都有对应的get和set方法，方便我们获取和设置这些属性的值。

接下来，我们来看看如何在项目中运用这个PageGrid类。你需要下载xstream.jar，它能帮助我们在Java和XML之间进行转换。在你的项目中引入xstream.jar后，你就可以利用PageGrid类来处理jqGrid的数据了。

在数据检索方面，你可以通过传递参数给controller，然后在controller中使用PageGrid类来接收这些参数。这些参数可以包括查询条件、排序方式等。在controller中处理完这些参数后，你可以使用PageGrid类的属性来构建返回给前端的数据。

分页排序参数也是数据操作中的重要部分。你可以通过jqGrid的内置功能来实现分页和排序。在前端，你可以设置分页参数和排序字段，然后将这些参数传递给controller。在controller中，你可以使用这些参数来查询数据库，并返回符合条件的数据。

至于sql语句的编写，这取决于你的具体需求和数据库结构。你可以根据查询条件、排序方式等来编写sql语句，然后在controller中执行这个sql语句，获取数据并返回给前端。

XStreamComponent：Java中的XML转换先锋

在Java世界里，有时我们需要将复杂的对象结构转化为XML格式的数据，或将XML数据重新映射回对象结构。对于这样的需求，`.honzh.mon.page`包下的`XStreamComponent`类应运而生，它为我们提供了强大的功能来处理XML与Java对象之间的转换。

这个类利用Apache的`XStream`库作为核心，通过`DomDriver`来和生成XML。它的主要任务是处理页面数据并将其转换为XML格式，或将XML数据转换回原始的对象结构。这一切的操作都是如此的流畅和简洁。

当我们需要一个新的`XStreamComponent`实例时，可以通过调用静态方法`newInstance()`来获取。这个实例将为我们提供一系列方法来进行XML与对象的转换。在这个过程中，我们还可以注册自定义的转换器来适应特定的数据映射需求。通过别名方法，我们可以为特定的Java类定义其在XML中的表示形式。这使得整个转换过程更加灵活和易于管理。

当我们需要将一个Java对象转化为XML时，只需调用`toXML`方法即可轻松实现。特别是针对页面数据，我们有专门的`toPageXML`方法。这个方法首先会注册一个自定义的转换器，然后调用通用的`toXML`方法来完成转换。相反地，当我们需要将XML数据转回Java对象时，我们可以使用`fromPageXML`或通用的`fromXML`方法来实现。这些方法的背后都是利用强大的XStream库来完成复杂的映射过程。我们还提供了处理注解的方法，使得我们可以根据特定的注解来调整转换过程。

这个类的主要应用场景在于将页面数据（如PageGrid）封装为XML对象，并传递给前端。通过简单的API调用，我们可以轻松实现这一功能，大大提高了数据的传输效率和兼容性。无论是在服务端还是客户端，都可以轻松地处理这些XML数据。通过自定义转换器和别名功能，我们可以更好地控制数据的结构和格式，以满足特定的业务需求。`XStreamComponent`是一个强大的工具，它简化了Java与XML之间的转换过程，为我们的开发工作带来了极大的便利。Java中的MapCustomConverter：数据库HashMap到标准XML格式的转化之旅

在数据处理的旅程中，我们经常面临各种挑战，其中之一就是将复杂的结构如Java的HashMap转化为标准的XML格式。为此，我们拥有一个强大的工具——MapCustomConverter。

此Java类，位于honzh.mon.page包内，继承了AbstractCollectionConverter类，专门用于处理Map的转换工作。该类主要设计用于处理HashMap、Hashtable以及他们的某些特定子类如LinkedHashMap和sun.font.AttributeMap等。它的核心功能包括将Map对象转换为XML格式数据以及从XML格式数据中恢复Map对象。

构造方法：创建MapCustomConverter对象时，我们传递一个Mapper对象作为参数给父类的构造方法。这个Mapper对象负责在对象和XML表示之间进行映射。

canConvert方法：该方法用于判断当前转换器是否可以处理特定的类型。在这里，如果传入的类型是HashMap或Hashtable或其特定的子类，则返回true。这表示我们可以处理这些类型的Map对象。

marshal方法：这是将Map对象转换为XML的核心过程。我们遍历Map的每个条目，对于每个条目，我们创建一个新的XML节点，节点的名称是键的名称，节点的值是对应的值。如果键或值为null，我们会使用特定的字符串（如"null"）来表示。这个过程使得我们可以把Map的内容以一种清晰的、结构化的方式转化为XML格式。

unmarshal方法：这是从XML恢复Map对象的过程。我们读取XML的每个节点，将节点的名称作为键，节点的值作为值放入Map中。这个过程使得我们可以从XML格式的数据中恢复原始的Map对象。

MapCustomConverter是一个强大的工具，能够将数据库中的HashMap转化为标准的XML格式数据。这不仅方便了数据的存储和传输，也为我们提供了一种通用的方式来处理和操作数据。无论是在分布式系统中进行数据交换，还是在不同平台间迁移数据，这种转换都显得尤为重要和实用。在Java的世界中，有一个名为BaseConditionVO的类，它坐落于honzh.mon.persistence包中，扮演着分页查询时参数设置的重要角色。这个类犹如一位优雅的舞者，在数据库查询的舞台上轻盈起舞，使得我们能轻松进行分页查询操作。

当您接触BaseConditionVO这个类时，会发现它内藏了丰富的信息。以下是它的主要属性及其功能描述：

PAGE_SHOW_COUNT属性定义了默认每页显示的记录数，这个数值设定为默认的十行数据。这正如一首诗的前奏，为我们预示着一场美妙的视觉盛宴即将上演。

紧接着是pageNum属性，它代表了当前查看的页码。想象一本厚厚的书，pageNum就像页码一样，指引我们翻到特定的部分。同样重要的还有numPerPage属性，它告诉我们每一页应该显示多少条记录。当numPerPage为空时，系统将默认采用PAGE_SHOW_COUNT设定的数值。这就像一个灵活的舞者，根据节奏调整自己的步伐和动作。

再者是totalCount属性，它提供了数据的总体数量。想象一下你在数糖果，totalCount就像是一个大糖果罐里的糖果总数。通过totalCount除以numPerPage，我们可以计算出数据的总页数。这就像一首诗的韵律，帮助我们把握全局的节奏和脉络。

还有两个属性关于排序的设置：orderField代表排序的列，而orderDirection则代表排序的方向。它们共同决定了数据的排序方式。这就像一场舞蹈中的指挥棒，引导着数据按照我们期望的方式排列组合。

分页数据查询基础条件类 - BaseConditionVO

在数据查询和处理中，我们经常需要处理分页、排序和检索域等功能。BaseConditionVO类为我们提供了这样的功能，它是一个基础的条件值对象（Value Object），用于封装这些查询参数。

该类包含以下关键属性：

1. PAGE_SHOW_COUNT：每页显示的默认条目数，设定为50。

2. pageNum：当前页码，默认为1。

3. numPerPage：每页显示的条目数，可以根据需求设定，如果没有设定，则默认为PAGE_SHOW_COUNT。

4. totalCount：总条目数，用于分页计算。

5. orderField：排序的字段名。

6. orderDirection：排序的方向，可以是"asc"或"desc"。

该类还包含一些方法，用于获取和设置这些属性的值。还提供了以下特色功能：

创建RowBounds：根据当前页码和每页显示的条目数，创建RowBounds对象，用于分页查询。

添加查询条件：通过addParams方法，可以添加查询的条件参数，方便后续的查询操作。

获取查询条件：通过getParams方法，可以获取之前添加的查询条件。

这个类的主要作用是将查询的条件参数进行封装，方便我们在进行数据查询时，一次性传入所有相关参数。它还支持排序和分页功能，使得数据查询更加灵活和方便。

在实际应用中，我们可以根据需求，对这个类进行扩展和修改，以满足不同的查询需求。BaseConditionVO类是一个强大的工具，能够帮助我们更好地处理数据查询的相关问题。在构建数据交互逻辑时，我们首先需要处理分页查询参数，并将这些参数封装到BaseConditionVO对象中。以下是获取jqGrid传递的参数并转换为BaseConditionVO分页查询对象的详细过程：

保护方法`getBaseConditionVOForTable()`用于实现这一功能。在此方法中，我们创建了BaseConditionVO对象，并通过`getParaToInt`和`getPara`方法获取分页参数，如当前页码、每页大小、排序方式和排序列。这些参数被设定在BaseConditionVO对象中，为我们后续的查询提供了明确的方向和限制。这样，我们就能准确地获取用户期望的数据。

紧接着，我们定义了一个名为`renderXml`的方法，用于将生成的XML数据写入到HttpServletResponse的输出流中。此方法首先设置响应的字符编码和内容类型，然后通过获取输出流打印XML响应。在这个过程中，我们确保了数据的正确性和传输的可靠性。如果在写入过程中遇到任何IOException，我们会通过日志记录错误信息，以便于后续的调试和修复。

在数字化交易的时代，我们时常需要处理大量的订单信息。特别是在处理支付相关的订单时，一种特定的方法被广泛应用——那就是通过mybatis进行分页查询。本文将详细介绍这一过程，并关注一个具体的函数`datablePayDealOrdersList`，该函数主要用于获取分页的支付订单数据。

在服务器上，这个方法的执行流程相当标准化。通过`XStreamComponent.newInstance()`创建一个新的XML流组件，用于处理XML格式的数据。接着，创建一个分页查询参数对象`BaseConditionVO`，并通过`vo.addParams("name", getPara("name"))`将检索域的值添加到查询对象中。这是一种常见的参数设置方式，使得查询更加精确和灵活。

然后，调用`dealOrderService.getByIssueUid(vo, vo.createRowBounds())`进行分页查询。这是mybatis特有的分页查询方式，它的效率非常高。与传统的分页组件相比，直接使用mybatis的查询方法更为直接和高效。很快，我们就会分享对应的mybatis中xml的sql写法，以进一步揭示其工作原理。

在这个过程中，任何可能的错误都会被捕获并处理。如果出现未分类的SQL异常`UncategorizedSQLException`，服务器会记录错误信息，并返回查询错误的提示。对于其他类型的异常，服务器同样会记录错误信息，并返回服务器错误的提示。

通过`renderXml(response, xmlResponse.replaceAll("__", "_"))`将数据写入到JSP的out输出流中。这一步是将查询结果呈现给用户的关键步骤，保证了数据的正确展示和传输。

通过mybatis进行分页查询是一种高效、实用的方法。它允许我们快速获取大量的订单信息，并在必要时进行精确查询。随着数字化交易的持续增长，这种方法的应用将越来越广泛。希望本文能够帮助读者更好地理解这个过程，并在实际项目中应用这些知识。在Java项目中，`DealOrderMapper`接口扮演着与数据库交互的重要角色。它位于`.honzh..database.mapper`包内，用于处理与数据库相关的操作。该接口包含一个方法`getByIssueUid`，用于根据特定的条件获取数据。这个方法接收两个参数：一个是`BaseConditionVO`对象，它包含了查询的条件；另一个是`RowBounds`对象，用于实现分页查询。

在`mapper.xml`文件中，对应的SQL查询语句被定义。这个文件利用MyBatis的动态SQL特性，根据传入的参数构建查询语句。它从`daa`表中选择所有满足条件的记录。其中，`is_delete=0`是一个固定的条件，表示选择未被删除的记录。接下来，如果`mo.name`有值，查询语句会加入一个针对`y.name`的模糊查询。

关于排序，MyBatis允许根据传入的`orderField`和`orderDirection`参数进行动态排序。如果这两个参数都有值，它们会被用来构建ORDER BY子句。如果没有指定排序字段和方向，查询将默认按照`d.order_time`降序排序。

通过MyBatis和动态SQL的结合，你可以轻松地构建出功能强大的数据访问层，与前端框架无缝集成，提供流畅的用户体验。无论你是正在开发一个全新的应用程序还是改进现有的系统，这种集成方式都将大大提高你的工作效率和代码质量。现在，你可以放心地使用这些技术来创建出色的数据驱动的应用程序了！