easyui combogrid跨域访问

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跨域访问

猜你喜欢