查询界面

<div id="pdfInfosSelectQueryDiv" class="horizon-list">
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">登记证明编号</span>
        <input type="text" id="registerNumber" name="registerNumber" class="am-form-field"
            placeholder="模糊查询，登记证明编号" maxlength="255" />
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">供应商名称</span>
        <input type="text" id="suppliersName" name="suppliersName" class="am-form-field"
            placeholder="精确查询，供应商名称" maxlength="255" />
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">财产描述</span>
        <input type="text" id="propertyDescription" name="propertyDescription" class="am-form-field"
            placeholder="模糊查询，财产描述" maxlength="5000" />
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">是否过期</span>
        <select id="isOverdue" name="isOverdue" data-am-selected>
            <option value="" selected>请选择</option>
            <option value="0">否</option>
            <option value="1">是</option>
        </select>
    </div>
    <div class="am-input-group am-input-group-lg">
        <span class="am-input-group-label">是否标记</span>
        <select id="isMark" name="isMark" data-am-selected>
            <option value="" selected>请选择</option>
            <option value="1">是</option>
            <option value="0">否</option>
        </select>
    </div>
    <div class="am-input-group am-input-group-lg" id="markReasonDiv" style="display:none;" >
        <span class="am-input-group-label">标记原因</span>
        <select id="markReason" name="markReason" multiple data-am-selected="{maxHeight: 100,searchBox: 1}">
        <option value="" >请选择</option>
        </select>
    </div>
    <div class="am-input-group am-input-group-lg" id="tradingTypeDiv" >
        <span class="am-input-group-label">交易类型</span>
        <select id="tradingType" name="tradingType"   data-am-selected>
        <option value="" >请选择</option>
        </select>
    </div>

    <button type="button" id="pdfInfosSelectQueryBtn" class="am-btn am-btn-primary">查询</button>
</div>

<div class="am-g am-cf am-padding">
    <div class="c-dt-title am-fl">
        <span>PDF信息列表</span>
    </div>
</div>

<div id="pdfInfos_admin_wrapper" class="dataTables_wrapper am-datatable am-form-inline dt-amazeui">
    <div class="am-g">
        <div class="am-u-sm-12 am-scrollable-horizontal">
            <table id="pdfInfos_table_dt" class="am-table am-table-striped am-table-bordered am-table-compact dataTable"
                role="grid" aria-describedby="pdfInfos_table_dt">
                <thead>
                    <tr role="row">
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">标记</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">登记证明编号</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">供应商名称</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">财产描述</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">登记时间</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">登记期限</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">到期日</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1" width="10%">标记原因</th>
                        <th class="am-text-nowrap am-text-center" tabindex="0" aria-controls="userManage_admin_dt" rowspan="1" colspan="1">交易类型</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 每个模块都应该提供一个init方法用来进行事件注册什么的
    function oldPdfInfoAdmin() {
    }// 定义一个类（函数）
    // 为该类（函数）添加一个静态方法extend
    oldPdfInfoAdmin.extend = function(obj) {
        for ( var a in obj)
            this[a] = obj[a];// 注意：这里的this即oldPdfInfoAdmin
    }
    oldPdfInfoAdmin.title = "中登信息查询";
    oldPdfInfoAdmin.dt = null;
    oldPdfInfoAdmin.extend({
        init : function() {

            // 初始化标记原因下拉列表
            var markReasonList = getDictInfo("mark_reason");
            // 显示到指定区域
            var markReasonName = $("#pdfInfosSelectQueryDiv").find("#markReason");
            if (markReasonList){
                $.each(markReasonList,function(index,obj){
                    var html="<option value=‘"+index+"‘ selected >"+obj+"</option>";
                    markReasonName.append(html);
                });
            }

            //交易类型 trading_type
            var tradingTypeList = getDictInfo("trading_type");
            // 显示到指定区域
            var tradingTypeName = $("#pdfInfosSelectQueryDiv").find("#tradingType");
            if (tradingTypeList){
                $.each(tradingTypeList,function(index,obj){
                    var html="<option value=‘"+obj+"‘ >"+obj+"</option>";
                    tradingTypeName.append(html);
                });
            }

            // PDF信息列表
            var column = autoBuildDtColumns(["mark", "registerNumber", "grantorPledgorName", "propertyDescription", "registerTime", "regesterDeadline", "regesterDueDate",
                                            "_markReasonDisplay","tradeType"]);

            var dtConfigs = {
                "columns" : column,
                "ordering" : false,
                "columnDefs" : [
                    {
                     "targets" : [ 0 ],
                     "render" : function(data, type, full) {
                         if(isNotBlank(full.uuid)) {
                             // 标记按钮
                             var markBtn = "<button class=‘am-btn am-btn-default am-btn-xs am-text-secondary mark-btn‘ style=‘margin-left: 5px;margin-right: 5px;‘>" +
                              "<span class=‘am-icon-dot-circle-o‘></span> 标记</button>";
                              // 取消标记按钮
                              var cancelMarkBtn = "<button class=‘am-btn am-btn-default am-btn-xs am-text-secondary cancel-mark-btn‘ style=‘margin-left: 5px;margin-right: 5px;‘>" +
                              "<span class=‘am-icon-circle-o‘></span> 取消标记</button>";
                              // 根据mark的值初始化不同按钮
                              if (full.mark == "1" || full.mark == 1) {
                                  return cancelMarkBtn;
                              } else {
                                 return markBtn;
                              }
                         }
                    }},
                    {
                     "targets" : [ 4 ],
                     "render" : function(data, type, full) {
                         return isNotBlank(full.registerTime) ? str2Date(full.registerTime, true) : "";
                    }},
                    {
                     "targets" : [ 6 ],
                     "render" : function(data, type, full) {
                         return isNotBlank(full.regesterDueDate) ? str2Date(full.regesterDueDate, false) : "";
                    }}
                ]
            };

            // draw.dt事件
            var pdfInfos_table_dt = $("#pdfInfos_table_dt").on("draw.dt", function() {
                $("#pdfInfos_table_dt tr:gt(0)").each(function() {
                    // 获取当前行的data
                    var rowIdx = $(this).prop(‘_DT_RowIndex‘);
                    if (isNotNull(rowIdx)) {
                        var rowData = getDtRowInfo(oldPdfInfoAdmin.dt, null, rowIdx);
                        // 取得当前行标记的值
                        var markStr = rowData[0].data.mark;
                        // 标记mark值为1时，行添加特殊颜色
                        if (markStr == "1") {
                            colorChange(markStr, $(this));
                        }
                    }
                });
            });

            // PDF信息列表数据绑定
            oldPdfInfoAdmin.dt = dtInit("#pdfInfos_table_dt", "/app/bl/pdfinfos/getpdfinfos/",
                null, dtConfigs, true, oldPdfInfoAdmin.getQueryPara);

            // 注册【查询】点击事件
            $("#pdfInfosSelectQueryDiv").find("#pdfInfosSelectQueryBtn").on("click", function() {
                  oldPdfInfoAdmin.dt.draw();
              });

            // 注册【标记】点击事件
            $("#pdfInfos_table_dt tbody").on("click", ".mark-btn", function() {
                var rowIdx = $(this).parents("tr").prop(‘_DT_RowIndex‘);
                var rowData = getDtRowInfo(oldPdfInfoAdmin.dt, null, rowIdx);
                if (isNotNull(rowData) && rowData.length > 0) {
                    openModal("app/bl/oldPdfInfos-edit",
                            "oldPdfInfosEditAdmin","请选择标记原因",
                             {"uuid" : rowData[0].data.uuid},
                             false,null,null,
                             null,{"comfirBtnName" : "确定"},null,null,{"width" : "500px"});
                }
            });

            // 注册【取消标记】点击事件
            $("#pdfInfos_table_dt tbody").on("click", ".cancel-mark-btn", function() {
                var rowIdx = $(this).parents("tr").prop(‘_DT_RowIndex‘);
                var rowData = getDtRowInfo(oldPdfInfoAdmin.dt, null, rowIdx);
                if (isNotNull(rowData) && rowData.length > 0) {
                    ajax_jsonp("/app/bl/pdfinfos/updatecancelmark/", {"uuid" : rowData[0].data.uuid}, function() {
                        oldPdfInfoAdmin.dt.draw(false);
                    }, null, "PUT");
                }
            });

            // 是否标记下拉框,控制标记原因的显影
             $("#isMark").on("change",function(){
                var qhyfAccountUuidText =  $("#isMark").find("option:selected").val();
                if (qhyfAccountUuidText == "1") {
                    $("#markReasonDiv").css("display", "block");
                }else {
                    $("#markReasonDiv").css("display", "none");
                }
            });

        },// init end
        getQueryPara : function() {
            var $queryDiv = $("#pdfInfosSelectQueryDiv");
             var select = $("#markReason");
            var markReason = "";
            for(i=0;i<select[0].length;i++){
                if(select[0][i].selected){
                    if(markReason.length != 0) {
                        markReason += ",";
                    }
                    markReason += select[0][i].value;
                }

            }
            // 获取查询条件的值
            return {
                "registerNumber" : $.trim($queryDiv.find("#registerNumber").val()),
                "suppliersName" : $.trim($queryDiv.find("#suppliersName").val()),
                "propertyDescription" : $.trim($queryDiv.find("#propertyDescription").val()),
                "isOverdue" : $queryDiv.find("#isOverdue").val(),
                "isMark": $queryDiv.find("#isMark").val(),
                "markReason" : markReason,
                "tradingType" : $queryDiv.find("#tradingType").val()
            }
        }//getQueryPara() END
    });//oldPdfInfoAdmin.extend  END
</script>

原文地址：https://www.cnblogs.com/xiaowoniulx/p/11635709.html