jqGrid增加toolbar

最新推荐文章于 2023-04-26 08:39:32 发布

原创最新推荐文章于 2023-04-26 08:39:32 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid

本文介绍如何结合Bootstrap框架与jqGrid插件创建一个具备高级搜索功能的表格应用。该应用支持按ID、黑名单状态及日期进行过滤，通过前端表单收集筛选条件并动态更新表格显示内容。

<!--toolbar 这是html代码，用到了bootstrap。 注意：在form上加onsubmit=‘return false’ 点击按钮的时候提交-->
<div id="grid-table-toolbar" class="container-fluid">
    <form class="form-inline" onsubmit="return false;">
        <div class="row">
            <div class="form-group col-md-3">
                <label for="id">ID：</label>
                <input type="text" class="form-control" name="id" id="id"
                       placeholder="客户类型" style="width: 180px;">
            </div>
            <div class="form-group col-md-3">
                <label>黑名单：</label>
                <select class="form-control" name="isBlack" style="width: 180px;">
                    <option value="">&#45;&#45;请选择&#45;&#45;</option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
            <div class="form-group col-md-3">
                <label>时间：</label>
                <input type="text" id="toolbar-datepicker" name="createDate" class="form-control"
                       style="width: 180px;"/>
            </div>
            <div class="col-md-1">
                <button class="btn btn-sm btn-primary btn-primary" id="toolbar-reset"
                        style="width: 100px">重置
                </button>
            </div>
            <div class="col-md-1" style="margin-left: 20px">
                <button class="btn btn-sm btn-primary btn-primary" id="toolbar-search"
                        style="width: 100px">搜索
                </button>
            </div>
        </div>
    </form>
</div>

$("#toolbar-search").click(function () {
    var postData = $(grid_selector).jqGrid("getGridParam", "postData");//获取postData数据

$.each(postData, function (k, v) {//将上次postData的数据清空
    if (k == "id" || k == "isBlack" || k == "createDate")
        delete postData[k];
});

var id = $("#grid-table-toolbar [name='id']").val();
var isBlack = $("#grid-table-toolbar [name='isBlack']").val();
var createDate = $("#grid-table-toolbar [name='createDate']").val();

postData.id = id;//将数据添加到postData中
postData.isBlack = isBlack;
postData.createDate = createDate;
//设置数据，并重新加载
$(grid_selector).jqGrid("setGridParam", {postData: postData}).trigger("reloadGrid");
});


<!--jqGrid里面配置参数-->
toolbar: [true, "top"]