combogrid 本身跨域
.net壳里面的js跨域访问其他主机服务!
描述:整个后台管理系统是各个主机上的ui工程拼起来的!
其中有个系统工具栏,位于.net工程所在的主机,系统工具栏里的js需要调用订单服务里面的方法,若是单一的ajax跨域调用远程服务则很简单!
此处是easyui的combogrid需要调用远程服务!
之前使用combogrid的时候,都是指定url,然后combogrid走默认的loader方法($.fn.combogrid.defaults.loader),这个laoder方法里面是本地ajax,无法跨域调远程服务!
分析问题。。。肯定要重写loader方法。。
于是各种百度easyui插件的扩展方法,如下:
/*扩展combogrid的ajax请求*/
$(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 我发现 combogrid的loader方法是直接继承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是一种强大的数据选择插件,可以提供给用户多种选择的数据项。但是,当数据项内容很多时,仅仅提供选择项是不够的,需要能够对用户的输入进行过滤,以便...
asyUI ComboGrid 集成分页、按键示例源码 源码描述: 实现的功能: 1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据; 5、...
在使用EasyUI框架中的`combogrid`组件时,可能会遇到两个主要问题:一是本地模糊搜索功能在多列上的实现;二是点击复选框时,无法正确选中数据的情况。本文将详细介绍如何解决这两个问题。 #### 二、EasyUI ...
修改上一个资源版本中结束编辑时...1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题
### easyui的datagrid中editor和combogrid的结合使用 #### 一、easyui简介及datagrid功能概述 easyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的UI组件,帮助开发者快速创建交互式Web应用。其中,...
easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。
1、下拉框下拉时出现表格; 2、表格带分页功能; 3、可以使用向上键、向下键在表格中移动选择行数据; 4、可以使用回车键在表格中选中行数据;...5、在下拉框的文本框中输入内容,能查询表格;...6、下拉框的文本框的...
jquery easyui中的combogrid比较特殊,算是combo和grid的组合,combogrid结合一个可编辑的文本框和下拉数据网格面板,可以让用户迅速找到并选择,又可以进行搜索,展示与当前输入的字符相匹配的数据。下面给大家介绍...
谁在jquery easyUI 下做过动态生成多条件查询功能,动态添加一行(一个条件):参数名(多个字段名)、关系符(>、<、>=、、=)、比较值(input)。大体就这样,点击“添加条件”,生成上面描述的一行,这个在jquery...
在本文中,我们将深入探讨如何在EasyUI框架中实现datagrid editor中的combogrid搜索框。EasyUI是一个基于jQuery的用户界面插件集合,它提供了丰富的组件,如datagrid、combogrid等,用于构建简洁且功能强大的Web应用...
摘要: 大概思路,创建WebAPI,CrossMainController并编写,Nuget安装microsoft.aspnet.webapi.cors., 跨域设置路由,WebAPI提供广泛的对外开放,可以起到整合性的作用,例如:跟Oracle ERP...跨域还能不受限制让更多人访问
基于EasyUI 官方的帮助。 Application 使用easyUI创建一个CRUD的应用 使用easyUI创建一个CRUD DataGrid 使用easyUI展开行详细编辑form创建CRUD... easyui 过滤ComboGrid 扩展 easyui DWR加载 easyUI 主题
如下所示: input和textarea: $('#controlid').prop('disabled', true); $('input:not(:button,:hidden)').prop('disabled', true);//禁用除button和hidden控件外的所有input控件 $('textarea').prop('disabled',...
本文介绍在使用jQuery EasyUI框架开发Web界面时,如何为Combo和Combobox组件添加清除值的功能。在很多Web应用中,提供一个清除输入的功能是十分必要的,可以提高用户的交互体验。jQuery EasyUI提供了一套丰富的UI...
在ASP.NET MVC中,使用EasyUI的datagrid组件进行跨域数据加载时,会遇到一些挑战,因为这涉及到浏览器的同源策略限制。同源策略是Web浏览器为了安全而实施的一种策略,它禁止一个源(协议、域名和端口)的文档或脚本...
本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下 效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可。下面是源码: <html> <head> <meta ...
EasyUI InsdepTheme是一款基于EasyUI的皮肤美化版本,它为开发者提供了更加美观且自定义的界面风格。EasyUI是一个轻量级的JavaScript框架,主要用于构建Web应用的用户界面,它基于jQuery,提供了丰富的组件和易用的...