combotree下拉框选项,发送ajax请求

本文介绍了如何使用EasyUI的combotree组件创建下拉框,并通过AJAX发送POST请求获取数据。在$.post()方法中,注意到参数的正确设置以避免undefined问题。同时,讨论了异步请求的性质及其对后台参数获取的影响,以及如何处理LINQ查询错误。最后,展示了如何加载数据到datagrid表格中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.下拉框部分

easyui--combotree

html代码

<input type="text" id="style" name="stryle" style="width:100px" class="easyui-combotree" multiple data-options=" valueFiled:' id', textFiled:'text',panelHeight:'auto' ">

js代码

写在$(function(){})里

$.post('' ,{} ,function(data)

{

 

} ,'json');

如下,漏掉最后的参数type,‘责任单位’下拉框里的内容全是undefined

jQuery中的Ajaxhttps://blog.youkuaiyun.com/u010082526/article/details/88055262
jquery对ajax操作进行了封装,

在jquery中$.ajax()方法属于最底层的方法

第二层是load()、$.get()\$.post()方法,

第三层是$.getScript()和$getJSON()方法。

$.get()方法
结构为:$.get()(url,data,callback,type);

url:String类型,表示请求html页面的统一资源定位器地址;
data:Object类型,发送至服务器的key/value数据;
callback:Function类型,请求完成后的回调函数,无论请求成功或失败。
参数说明:其他如上,type表示服务器端返回内容的格式,包括xml,html,json,等

$.post()方法
结构和$.get()方法相同,不过也有区别,就是一些传递数据的规则不同。

后台拼接的json字符串

public string GetStyleList()
        {
            return "[{\"id\":\"all\",\"text\":\"全部\",\"checked\":true,\"children\":[{\"id\":\"0\",\"text\":\"汽修店类\"},{\"id\":\"1\",\"text\":\"餐饮类\"},{\"id\":\"2\",\"text\":\"加油站类\"},{\"id\":\"3\",\"text\":\"工业企业类\"},{\"id\":\"4\",\"text\":\"工地类\"},{\"id\":\"5\",\"text\":\"环境整治类\"}," +
             "{\"id\":\"6\",\"text\":\"裸露地面类\"},{\"id\":\"7\",\"text\":\"锅炉类\"},{\"id\":\"8\",\"text\":\"城市道路类\"},{\"id\":\"9\",\"text\":\"堵车点位类\"},{\"id\":\"10\",\"text\":\"社会停车场类\"},{\"id\":\"11\",\"text\":\"垃圾收集站点类\"},{\"id\":\"12\",\"text\":\"居民楼类\"},{\"id\":\"13\",\"text\":\"汽修店类\"}]}]";           
        }

此处是多选combotree,选中状态是checked:true

如果是单选combobox,选中状态就是selected:true

2.后台获取参数,查询数据

获取到的Unit等参数为null值,因为前台的$.post()默认是异步请求,没有返回结果的情况下,会执行下面的语句LoadData();

此处可参考https://blog.youkuaiyun.com/sunnyzyq/article/details/78730894

https://blog.youkuaiyun.com/wang48430327/article/details/80898461

jquery的post异步请求https://www.cnblogs.com/sllcom/p/7859323.html

对前台代码进行修改,改成发布同步请求

 

3.linq查询报错

https://bbs.youkuaiyun.com/topics/310130308

尝试写在findall里

或者,把tostring改成  +“”

 最后,先tolist,在转tostring

https://blog.youkuaiyun.com/xiaojia_boke/article/details/8786362

此时,是由于获取到的Unit等参数为null报错($.post()的异步请求造成的)

修改如下

注释掉同步请求,仍保留异步请求,加速页面响应 

4.数据表格--datagrid

参考http://www.jeasyui.net/plugins/183.html

    function LoadData() {
        var para = serializeObject($('#form_search').form());
        dg = $('#dg').datagrid({
            url: '@Url.Action("LoadData", "PatrolRecord")',
            fitColumns: true,
            fit: true,
            pageSize: 20,
            pageNum: 1,
            nowrap:false,
            view: nodataview,
            queryParams: para,
            columns: [[
                { field: 'description', title: '事件', align: 'center', width: '30%' },
                { field: 'monitortime', title: '时间', align: 'center' },
                { field: 'status', title: '是否解决', align: 'center' },
                { field: 'style', title: '曝光类型', align: 'center', width: '30%' },
                { field: 'community', title: '所在社区', align: 'center' },
                { field: 'Unit', title: '责任单位', align: 'center' },
            ]],
            pagination: true
        });
    }

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/tags/inc.jsp"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="${ctx }/"></base> <meta http-equiv="X-UA-Compatible" content="IE=8"></meta> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> <meta http-equiv="pragma" content="no-cache"></meta> <meta http-equiv="cache-control" content="no-cache"></meta> <meta http-equiv="expires" content="0"></meta> <title>非车险承保业务清单</title> <%@ include file="/WEB-INF/tags/css.jsp"%> <%@ include file="/WEB-INF/tags/script.jsp"%> <%@ include file="/WEB-INF/tags/artDialog.jsp"%> <link rel="stylesheet" href="static/rFCUnderLA/rFCUnderLA_list.css"> <!-- 设置导航地址 --> <script type="text/javascript"> $("#locSpan", window.parent.document).html("${dq}"); </script> </head> <body> <div class="impaction"> <div class="institutions"> <form id="form" method="POST"> <input type="hidden" name="dq" value="${dq}"> <table class="form_table"> <tr> <td class="search_title">机构:</td> <td><input id="company" name="company" class="search_input"></input></td> <td class="search_title">产品:</td> <td><input id="risk" name="risk" class="search_input"></input></td> <td class="search_title">核保通过时间:</td> <td> <input id="underdateStart" name="underdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.underdateStart}"></input> ~ <input id="underdateEnd" name="underdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.underdateEnd}"></input> </td> </tr> <tr> <td class="search_title">保单类型:</td> <td><input id="policytype" name="policytype" class="search_input"></input></td> <td class="search_title">业务来源:</td> <td><input id="source" name="source" class="search_input"></input></td> <td class="search_title">起保日期:</td> <td> <input id="startdateStart" name="startdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.startdateStart}"></input> ~ <input id="startdateEnd" name="startdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.startdateEnd}"></input> </td> </tr> <tr> <td class="search_title">渠道:</td> <td><input id="channel" name="channel" class="search_input"></input></td> <td class="search_title">业务团队:</td> <td><input id="team" name="team" class="search_input"></input></td> <td class="search_title">核保日期与生效日期大者:</td> <td> <input id="maxdateStart" name="maxdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.maxdateStart}"></input> ~ <input id="maxdateEnd" name="maxdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.maxdateEnd}"></input> </td> </tr> <tr> <td class="search_title">创新业务标识:</td> <td><input id="surveyind" name="surveyind" class="search_input"></input></td> <td class="search_title">股东业务标识:</td> <td><input id="isshareholder" name="isshareholder" class="search_input"></input></td> <td class="search_title">保险止期:</td> <td> <input id="enddateStart" name="enddateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.enddateStart}"></input> ~ <input id="enddateEnd" name="enddateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.enddateEnd}"></input> </td> </tr> <tr> <td class="search_title">业务员代码:</td> <td><input id="handler1code" name="handler1code" class="easyui-textbox search_input" value="${params.handler1code }"></input></td> <td class="search_title">业务员名称:</td> <td><input id="handler1name" name="handler1name" class="easyui-textbox search_input" value="${params.handler1name }"></input></td> <td class="search_title">保险金额:</td> <td> <input id="sumamountStart" name="sumamountStart" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumamountStart}"></input> ~ <input id="sumamountEnd" name="sumamountEnd" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumamountEnd}"></input> </td> </tr> <tr> <td class="search_title">代理人代码:</td> <td><input id="intermediarycode" name="intermediarycode" class="easyui-textbox search_input" value="${params.intermediarycode }"></input></td> <td class="search_title">代理人名称:</td> <td><input id="intermediaryname" name="intermediaryname" class="easyui-textbox search_input" value="${params.intermediaryname }"></input></td> <td class="search_title">保费收入:</td> <td> <input id="sumpremStart" name="sumpremStart" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumpremStart}"></input> ~ <input id="sumpremEnd" name="sumpremEnd" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumpremEnd}"></input> </td> </tr> <tr> <td class="search_title">号牌号码:</td> <td><input id="fieldaf" name="fieldaf" class="easyui-textbox search_input" value="${params.fieldaf }"></input></td> <td class="search_title">默认列表:</td> <td><input id="dim" name="dim" class="search_input"></input></td> <td class="search_title">自选列表:</td> <td><input id="val" name="val" class="search_input"></input></td> </tr> <tr> <td class="search_title">客户类型:</td> <td><input id="aInsuredTypeName" name="aInsuredTypeName" class="search_input" /></td> </tr> <tr> <td><input id="searchInput" type="button" class="inquiry fl marg12" value="查询" onclick="searchTable()"></input></td> <td> <input id="downloadInput" type="button" class="inquiry fl marg12" value="下载" onclick="downloadTable()"></input> <input id="inputSum" name="inputSum" type="text"></input> </td> </tr> </table> </form> <script type="text/javascript"> $('#aInsuredTypeName').combobox({ valueField: 'id', textField: 'text', data : [{"id":"","text":"全选"},{"id":"个人","text":"个人"},{"id":"团体","text":"团体"}], multiple : false, editable : false, prompt : "全部交易", onShowPanel : function() { $('.tree-file').remove(); }, onLoadSuccess : function() { if ('${params.aInsuredTypeName}') { $("#aInsuredTypeName").combobox("setValue", '${params.aInsuredTypeName}'); } }, }); <%--$('#aInsuredTypeName').combobox({--%> <%-- valueField: 'id',--%> <%-- textField: 'text',--%> <%-- data : [{"id":"","text":"全选"},{"id":"个人","text":"个人"},{"id":"团体","text":"团体"}],--%> <%-- editable : false,--%> <%-- multiple : false,--%> <%-- prompt : "请选择",--%> <%-- onLoadSuccess : function(){--%> <%-- $('#aInsuredTypeName').combobox('clear');--%> <%-- if('${params.aInsuredTypeName}'){--%> <%-- $('#aInsuredTypeName').combobox('setValue', '${params.aInsuredTypeName}');--%> <%-- }--%> <%-- }--%> <%--});--%> </script> <script type="text/javascript"> $('#company').combotree({ data : JSON.parse('${companys}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#risk').combotree({ data : JSON.parse('${risks}'), panelHeight : '400px', lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#policytype').combobox({ valueField: 'id', textField: 'text', data : [{"id":"N","text":"最新保单"},{"id":"O","text":"原始保单"},{"id":"E","text":"原始保单+批单"}], editable : false, multiple : false, prompt : "请选择", onLoadSuccess : function(){ if('${params.policytype}'){ $('#policytype').combobox('setValue', '${params.policytype}'); } } }); </script> <script type="text/javascript"> $('#source').combotree({ data : JSON.parse('${sources}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#channel').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${channels}'), editable : true, multiple : true, prompt : "请选择", onLoadSuccess : function(){ if('${params.channel}'){ $('#channel').combotree('setValues', '${params.channel}'.split(',')); } }, onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#team').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${teams}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#surveyind').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${surveyinds}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#isshareholder').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${isshareholders}'), editable : true, multiple : true, prompt : "请选择", onLoadSuccess : function(){ if('${params.isshareholder}'){ $('#isshareholder').combotree('setValues', '${params.isshareholder}'.split(',')); } }, onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#dim').combotree({ valueField: 'id', textField: 'text', data: JSON.parse('${dims}'), editable: true, multiple: true, prompt: "请选择", onLoadSuccess: function () { if ('${params.dim}') { $('#dim').combotree('setValues', '${params.dim}'.split(',')); } }, onShowPanel: function () { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#val').combotree({ valueField: 'id', textField: 'text', data: JSON.parse('${vals}'), editable: true, multiple: true, prompt: "请选择", onLoadSuccess: function () { if ('${params.val}') { $('#val').combotree('setValues', '${params.val}'.split(',')); } }, onShowPanel: function () { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> </div> <div class="physical"> <c:if test="${not empty dimNodesList and dimNodesList != null}"> <table class="datalist"> <tr class="titlehead"> <c:forEach items="${dimNodesList }" var="var"> <c:choose> <c:when test="${var.text == '清单总数'}"> <c:if test="${params.deptid == '0111'}"> <th>清单总数</th> </c:if> </c:when> <c:when test="${var.text == '批单号' && (params.policytype == 'O' || params.policytype == 'N') }"> </c:when> <c:otherwise> <th>${var.text}</th> </c:otherwise> </c:choose> </c:forEach> </tr> <c:forEach items="${rFCUnderLAs}" var="var"> <tr> <c:forEach items="${dimNodesList}" var="var2"> <c:choose> <c:when test="${fn:indexOf(var2.type, 'Val') != -1}"> <c:choose> <c:when test="${var2.id == 'coinsrate' || var2.id == 'commissionratio' || var2.id == 'fsh' || var2.id == 'personalkpiratio' || var2.id == 'commissionpersonalkpiratio' || var2.id == 'reinssharerate' || var2.id == 'coinsissuerate'|| var2.id == 'damageFee'|| var2.id == 'otherPrevention'|| var2.id == 'MARKET_ACQUISITION_COST_RATE'}"> <td class="tdright"><fmt:formatNumber pattern=",##0.00%" value="${var[var2.id] }" /></td> </c:when> <c:when test="${var2.id == 'num'}"> <c:if test="${params.deptid == '0111'}"> <td class="tdright"><fmt:formatNumber pattern=",##0" value="${var[var2.id] }" /></td> </c:if> </c:when> <c:when test="${var2.id == 'installmentno'}"> <td class="tdright"><fmt:formatNumber pattern=",##0" value="${var[var2.id] }" /></td> </c:when> <c:otherwise> <td class="tdright"><fmt:formatNumber pattern=",##0.00" value="${var[var2.id]}" /></td> </c:otherwise> </c:choose> </c:when> <c:when test="${var2.id == 'endorseqno' && (params.policytype == 'O' || params.policytype == 'N') }"> </c:when> <c:otherwise> <td>${var[var2.id]}</td> </c:otherwise> </c:choose> </c:forEach> </tr> </c:forEach> </table> <div id="page" class="easyui-pagination" data-options=" total: ${page.totalResult }, pageNumber:${page.currentPage }, pageSize:${page.showCount }, layout:['list','first','prev','sep','links','sep','next','last','manual'], onSelectPage: function(pageNumber, pageSize){ searchPage(pageNumber, pageSize) }"></div> </c:if> </div> </div> <script type="text/javascript"> function searchTable() { if ($("#dim").combotree("getText") == "" ) { alert("默认列表至少要勾选其中一个值!"); } else { $("#form").attr("action", "${ctx}/rFCUnderLA/list?menuid=${menuid}").submit(); } } </script> <script type="text/javascript"> function searchPage(pageNumber, pageSize) { $("#form").attr( "action", "${ctx}/rFCUnderLA/list?menuid=${menuid}&pageNo=" + pageNumber + "&pageSize=" + pageSize).submit(); } </script> <script type="text/javascript"> //下载 function downloadTable(){ if ("${page.totalResult }" == "") { $("#downloadInput").css("background-color", "gray"); alert("请先查询再下载!"); } else if (parseInt("${page.totalResult }") > 1000000) { $("#downloadInput").css("background-color","gray"); alert("数据记录超过100万,无法下载,请筛选后再重试!"); } else if ($("#dim").combotree("getText") == "") { alert("维度列表或指标列表至少要勾选其中一个值!"); } else { var m = confirm("你确认要进行下载吗?"); if (m == true) { alert("文件正在制作中,请到下载专区下载!"); var underdate = "核保通过时间:"+$("#underdateStart").datebox("getText")+"~"+$("#underdateEnd").datebox("getText")+";\\n"; var startdate = "起保日期:"+$("#startdateStart").datebox("getText")+"~"+$("#startdateEnd").datebox("getText")+";\\n"; var maxdate = "核保日期与生效日期大者:"+$("#maxdateStart").datebox("getText")+"~"+$("#maxdateEnd").datebox("getText")+";\\n"; var enddate = "保险止期:"+$("#enddateStart").datebox("getText")+"~"+$("#enddateEnd").datebox("getText")+";\\n"; var sumamount = "保险金额:"+$("#sumamountStart").textbox("getText")+"~"+$("#sumamountEnd").textbox("getText")+";\\n"; var sumprem = "保费收入:"+$("#sumpremStart").textbox("getText")+"~"+$("#sumpremEnd").textbox("getText")+";\\n"; var company = "机构:"+($("#company").combotree("getText")?$("#company").combotree("getText"):"请选择")+";\\n"; var risk = "产品:"+($("#risk").combotree("getText")?$("#risk").combotree("getText"):"请选择")+";\\n"; var policytype = "保单类型:"+$("#policytype").combobox("getText")+";"; var channel = "渠道:"+($("#channel").combotree("getText")?$("#channel").combotree("getText"):"请选择")+";\\n"; var source = "业务来源:"+($("#source").combotree("getText")?$("#source").combotree("getText"):"请选择")+";\\n"; var team = "业务团队:"+($("#team").combotree("getText")?$("#team").combotree("getText"):"请选择")+";\\n"; var surveyind = "创新业务标识:"+$("#surveyind").combotree("getText")+";\\n"; var isshareholder = "股东业务标识:"+($("#isshareholder").combotree("getText")?$("#isshareholder").combotree("getText"):"请选择")+";\\n"; var handler1code = "业务员代码:"+$("#handler1code").textbox("getText")+";\\n"; var handler1name = "业务员名称:"+$("#handler1name").textbox("getText")+";\\n"; var intermediarycode = "代理人代码:"+$("#intermediarycode").textbox("getText")+";\\n"; var intermediaryname = "代理人名称:"+$("#intermediaryname").textbox("getText")+";\\n"; var dim = "维度列表:" + $("#dim").combotree("getText") + ";\\n"; var val = "指标列表:" + $("#val").combotree("getText") + ";\\n"; var aInsuredTypeName = "客户类型:"+$("#aInsuredTypeName").textbox("getText")+";\\n"; var inputSum = underdate + startdate + maxdate + enddate + sumamount + sumprem + company + risk + policytype + source + channel + team + surveyind + isshareholder + handler1code + handler1name + intermediarycode + intermediaryname + dim + val + aInsuredTypeName; $("#inputSum").val(inputSum); $.ajax({ type : "POST", url : "${ctx}/rFCUnderLA/download", data : $('#form').serialize(), }); } } } </script> <script type="text/javascript"> window.onload = function() { if ("${page.totalResult }" == "" || parseInt("${page.totalResult }") > 1000000 || ($("#dim").combotree("getText") == null || $("#val") .combotree("getText") == null)) { $("#downloadInput").css("background-color", "gray"); } } </script> </body> </html> 请判断为什么 创新业务标识 时常出不来下拉按钮,但是股东业务标识 和业务团队 这些下拉选择没问题
07-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值