修改jqgrid表格外边框的颜色

可以通过CSS样式来修改jqGrid表格外边框的颜色，具体步骤如下：

1. 打开页面的CSS文件或者在页面的`<style>`标签中添加以下代码：

.ui-jqgrid {
    border: 2px solid #f00; /* 修改表格外边框为2px粗的红色边框 */
}

2. 将`#f00`替换为想要设置的外边框颜色的十六进制值即可。

需要注意的是，如果页面中存在多个jqGrid表格，上述CSS代码会同时作用于所有表格的外边框。如果只想修改某一个表格的外边框，可以为该表格添加一个唯一的class，然后在CSS中使用该class来修改该表格的外边框，例如：

<table id="grid1" class="my-grid"></table>

.my-grid.ui-jqgrid {
    border: 2px solid #f00; /* 修改id为"grid1"的表格的外边框为2px粗的红色边框 */
}

相关问题

设置 jqgrid表格样式

可以通过以下步骤设置 jqGrid 表格样式：

1. 引入 jqGrid 插件和样式文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/css/ui.jqgrid.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/jquery.jqgrid.min.js"></script>

2. 在 HTML 页面中添加一个 div 元素作为表格容器。

<div id="grid"></div>

3. 使用 JavaScript 代码初始化 jqGrid 表格并设置样式。

$(function(){
    $("#grid").jqGrid({
        url: "data.json",
        datatype: "json",
        colModel: [
            { name: "id", label: "ID", width: 50 },
            { name: "name", label: "Name", width: 150 },
            { name: "age", label: "Age", width: 50 },
            { name: "address", label: "Address", width: 200 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#pager",
        sortname: "id",
        viewrecords: true,
        sortorder: "asc",
        caption: "Sample Grid"
    });
    $("#grid").jqGrid("navGrid", "#pager", { edit: false, add: false, del: false });
});

4. 在 CSS 文件中添加样式。

.ui-jqgrid {
    font-size: 14px;
}
.ui-jqgrid tr.jqgrow td {
    padding: 5px;
}
.ui-jqgrid .ui-jqgrid-hdiv {
    background-color: #f2f2f2;
}
.ui-jqgrid .ui-jqgrid-btable {
    border-collapse: separate;
    border-spacing: 0px;
}
.ui-jqgrid .ui-jqgrid-pager {
    background-color: #f2f2f2;
    border-top: none;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-table {
    margin: 0;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button {
    border: none;
    margin: 0 5px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button:hover {
    background-color: #e6e6e6;
}

注意：样式文件中的样式可以根据需要进行修改，以上只是一个示例。

c# 封装 jqgrid 表格搜索

在 C# 中封装 jqGrid 表格搜索，可以使用 jQuery 的 AJAX 功能向后端发送请求并获取数据，然后使用 JSON 序列化和反序列化来处理数据。以下是一个简单的示例：

首先，在前端页面中，你需要定义一个 jqGrid 表格，并且在表格上方添加搜索框和搜索按钮。这里假设搜索框的 ID 为 `searchInput`，搜索按钮的 ID 为 `searchButton`，表格的 ID 为 `grid`：

<div>
    <input type="text" id="searchInput">
    <button type="button" id="searchButton">搜索</button>
</div>
<table id="grid"></table>

接下来，在 JavaScript 中，你需要定义一个函数来处理搜索请求，并使用 AJAX 向后端发送请求。这里假设后端接口的 URL 为 `/api/search`：

function search() {
    var keyword = $("#searchInput").val();
    $.ajax({
        url: "/api/search",
        data: { keyword: keyword },
        success: function(data) {
            $("#grid").jqGrid("setGridParam", { data: data }).trigger("reloadGrid");
        },
        error: function(xhr, status, error) {
            alert("搜索错误：" + error);
        }
    });
}

在上面的代码中，`search` 函数首先从搜索框中获取关键词，然后使用 AJAX 向后端发送请求，请求参数中包含关键词。如果请求成功，就将返回的数据设置到 jqGrid 中，并触发表格重新加载的事件。如果请求失败，就弹出错误提示框。

最后，在 C# 后端中，你需要处理搜索请求，并返回符合搜索条件的数据。这里假设你使用 ASP.NET Web API 2 来处理请求，你可以这样编写控制器方法：

public IHttpActionResult Search(string keyword)
{
    var data = GetData();  // 获取原始数据
    var filteredData = data.Where(d => d.Contains(keyword));  // 进行筛选
    return Json(filteredData);  // 返回 JSON 格式的数据
}

在上面的代码中，`Search` 方法首先从数据源中获取原始数据，然后使用 LINQ 进行筛选，找出符合搜索关键词的数据。最后，将筛选后的数据以 JSON 格式返回给前端。

需要注意的是，这里的 `GetData` 方法需要根据你的具体业务逻辑来实现，它可以从数据库、文件、缓存等数据源中获取数据。