`
yjz毕竟是云
  • 浏览: 8232 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

easyui combogrid跨域访问

阅读更多
combogrid 本身跨域
.net壳里面的js跨域访问其他主机服务!
 
描述:整个后台管理系统是各个主机上的ui工程拼起来的!
其中有个系统工具栏,位于.net工程所在的主机,系统工具栏里的js需要调用订单服务里面的方法,若是单一的ajax跨域调用远程服务则很简单!
此处是easyuicombogrid需要调用远程服务!
之前使用combogrid的时候,都是指定url,然后combogrid走默认的loader方法($.fn.combogrid.defaults.loader),这个laoder方法里面是本地ajax,无法跨域调远程服务!
分析问题。。。肯定要重写loader方法。。
于是各种百度easyui插件的扩展方法,如下:
/*扩展combogridajax请求*/
$(function(){
    var Myloader = $.extend([], $.fn.combogrid.defaults.loader);
     console.log(Myloader);
      Myloader=function(param,success,error){
          $.ajax({
              url: '/api/customer/receiveCustomer',
              method: 'POST',
              xhrFields: {withCredentials: true},
              dataType: "jsonp",
              data: {customerId: $('#vipCustomerId').val()},
              jsonp: "receivevipCustomercallback",
              receivevipCustomercallback: "receivevipCustomercallback_success",
              success: function(data){
                  var con=data.list;
                  success(con);
              }
          })
      }
 
})
 
然并卵 不起作用!
又想给combogrid 增加方法,例如:
$.extend($.fn.datagrid.methods, {
    columnMoving: function (jq) {}})
 
又然并卵。。
 
之后又各种尝试,通过在谷歌浏览器的console打印 $.fn.combogrid.defaults.loader 我发现 combogridloader方法是直接继承datagrid的!
卧槽。。忘了easyui的插件之间的继承关系!
于是老实看api文档,发现datagrid里面可以直接定义loader属性,那么combogrid也可以直接定义loader属性,且loader属性是个function ,这个function是用来发ajax请求的!
于是拨开云雾见青天!
//客户下拉列表
$('#customerName').combogrid({
    // data:data.list,
    panelWidth: 503,
    panelHeight: 338,
    idField: 'customerId',
    textField: 'customerName',
    editable: true,
    loader:function (param,success,error) {
        $.ajax({
                url:"/api/customer/queryCustomerInStr",
                method:'post',
                xhrFields: {withCredentials: true},
                dataType: "jsonp",
                data: {q:$("#aa .textbox-value").val()},
                jsonp: "queryCustomerInStrCallback",
                queryCustomerInStrCallback: "queryCustomerInStrCallback_success",
            success:function(data){
                success(data.list)
            }
 
            })
    },
    mode: 'remote',
    columns: [[
        {field: 'customerId', title: "客户id", width: 70, hidden: 'true'},
        {field: 'customerName', title: "客户名", width: 250, align: "left"},
        {field: 'registAmount', title: "注册资本()", width: 75, align: "left"},
        {field: 'orderNumber', title: "成交数", width: 45, align: "left"},
        {
            field: 'isGet', title: "操作", width: 40, align: "left",
            formatter: function (value, row, index) {
                if (value == 1)
                    return "<a href=\"javascript:Receiving_vipCustomer()\">领取</a>";
 
                else if (value == 0)
                    return "";
                return "";
            }
        }
    ]],
    onClickRow: function (rowIndex, rowData) {
        $('#customerName').combogrid('setValue', rowData.customerName);
        $('#vipCustomerId').val(rowData.customerId);
    }
});
 
 
 
一开始是参照历史代码:
// $.ajax({
//     url:"/api/customer/queryCustomerInStr",
//     method:'post',
//     xhrFields: {withCredentials: true},
//     dataType: "jsonp",
//     data: {q:$("#aa .textbox-value").val()},
//     jsonp: "queryCustomerInStrCallback",
//     queryCustomerInStrCallback: "queryCustomerInStrCallback_success",
//     success: function (data) {
//         if (data.success == '1') {
            //客户下拉列表
            $('#customerName').combogrid({
                // data:data.list,
                panelWidth: 503,
                panelHeight: 338,
 
ajax跨域请求得到的数据塞给combagrid! 但是这样的话combogrid就失去意义了!。。交互各种差!

 

分享到:
评论

相关推荐

    easyui combogrid实现本地模糊搜索过滤多列

    easyui combogrid实现本地模糊搜索过滤多列 easyui combogrid是一种强大的数据选择插件,可以提供给用户多种选择的数据项。但是,当数据项内容很多时,仅仅提供选择项是不够的,需要能够对用户的输入进行过滤,以便...

    EasyUI ComboGrid 集成分页、按键示例

    asyUI ComboGrid 集成分页、按键示例源码 源码描述: 实现的功能: 1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据; 5、...

    combogrid 本地搜索多列匹配及复选框选中问题

    在使用EasyUI框架中的`combogrid`组件时,可能会遇到两个主要问题:一是本地模糊搜索功能在多列上的实现;二是点击复选框时,无法正确选中数据的情况。本文将详细介绍如何解决这两个问题。 #### 二、EasyUI ...

    easyui datagrid 行编辑中combogrid和combobox显示问题

    修改上一个资源版本中结束编辑时...1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题

    easyui的datagrid中editor和combogrid的结合使用

    ### easyui的datagrid中editor和combogrid的结合使用 #### 一、easyui简介及datagrid功能概述 easyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的UI组件,帮助开发者快速创建交互式Web应用。其中,...

    easyui datagrid editor combogrid和combobox

    easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。

    EasyUI ComboGrid

    1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据;...5、在下拉框的文本框中输入内容,能查询表格;...6、下拉框的文本框的...

    EasyUi中的Combogrid 实现分页和动态搜索远程数据

    jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。下面给大家介绍...

    jquery easyUI 实现动态生成多条件查询功能

    谁在jquery easyUI 下做过动态生成多条件查询功能,动态添加一行(一个条件):参数名(多个字段名)、关系符(&gt;、&lt;、&gt;=、、=)、比较值(input)。大体就这样,点击“添加条件”,生成上面描述的一行,这个在jquery...

    简介EasyUI datagrid editor combogrid搜索框的实现

    在本文中,我们将深入探讨如何在EasyUI框架中实现datagrid editor中的combogrid搜索框。EasyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的组件,如datagrid、combogrid等,用于构建简洁且功能强大的Web应用...

    跨域WebApi的Jquery EasyUI的数据交互

    摘要: 大概思路,创建WebAPI,CrossMainController并编写,Nuget安装microsoft.aspnet.webapi.cors., 跨域设置路由,WebAPI提供广泛的对外开放,可以起到整合性的作用,例如:跟Oracle ERP...跨域还能不受限制让更多人访问

    EasyUI tutorial 中文版 chm

    基于EasyUI 官方的帮助。 Application 使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD... easyui 过滤ComboGrid 扩展 easyui DWR加载 easyUI 主题

    浅谈EasyUI常用控件的禁用方法

    如下所示: input和textarea: $('#controlid').prop('disabled', true); $('input:not(:button,:hidden)').prop('disabled', true);//禁用除button和hidden控件外的所有input控件 $('textarea').prop('disabled',...

    jQuery EasyUI 为Combo,Combobox添加清除值功能的实例

    本文介绍在使用jQuery EasyUI框架开发Web界面时,如何为Combo和Combobox组件添加清除值的功能。在很多Web应用中,提供一个清除输入的功能是十分必要的,可以提高用户的交互体验。jQuery EasyUI提供了一套丰富的UI...

    ASP.NET MVC中EasyUI的datagrid跨域调用实现代码

    在ASP.NET MVC中,使用EasyUI的datagrid组件进行跨域数据加载时,会遇到一些挑战,因为这涉及到浏览器的同源策略限制。同源策略是Web浏览器为了安全而实施的一种策略,它禁止一个源(协议、域名和端口)的文档或脚本...

    EasyUI实现下拉框多选功能

    本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下 效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可。下面是源码: &lt;html&gt; &lt;head&gt; &lt;meta ...

    EasyUI InsdepTheme EasyUI的皮肤美化 免费版

    EasyUI InsdepTheme是一款基于EasyUI的皮肤美化版本,它为开发者提供了更加美观且自定义的界面风格。EasyUI是一个轻量级的JavaScript框架,主要用于构建Web应用的用户界面,它基于jQuery,提供了丰富的组件和易用的...

Global site tag (gtag.js) - Google Analytics