查询界面
Posted xiaowoniulx
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了查询界面相关的知识,希望对你有一定的参考价值。
<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>
以上是关于查询界面的主要内容,如果未能解决你的问题,请参考以下文章