easyui datagrid跨域加载jsonp数据源
easyui datagrid加载jsonp数据源示例。如果datagrid要加载跨域的数据，跨域页面提供的数据格式为非jsonp数据，当直接配置datagrid的url启用ajax加载地址时，即使url返回的数据格式符合datagrid格式的json字符串，由于浏览器安全问题，ajax是不允许跨域请求的（除非设置动态页设置过：Access-Control-Allow-Origin响应头），导致无法获取到数据。要加载跨域的数据，需要自己站点做代理页面或者修改跨域页面提供jsonp数据。
easyui datagrid要加载jsonp数据源，需要自定义loader配置，通过jquery的ajax先加载jsonp数据源后，再执行success回调参数回传加载到的数据。
| loader | function |
Defines how to load data from remote server. Return false can abort this action. This function takes following parameters: param: the parameter object to pass to remote server. success(data): the callback function that will be called when retrieve data successfully. error(): the callback function that will be called when failed to retrieve data. |
easyui datagrid跨域加载jsonp数据源源代码如下
<table class="easyui-datagrid" title="easyui datagrid使用jsonp数据" style="width:700px;height:250px"
data-options="fitColumns:true,collapsible:true,
loader:function(param,success,error){
$.ajax({ url: 'data.asp', dataType: 'jsonp', success: function (data) {
success(data);
}, error: function (xhr) {error(xhr.responseText) }
});}" id="dg">
<thead>
<tr>
<th data-options="field:'folkName',width:80">folkName</th>
<th data-options="field:'folkRelation',width:100">folkRelation</th>
<th data-options="field:'folkCompany',width:80,align:'right',editor:'text'">folkCompany</th>
</thead>
</table>
data.asp
<%response.Write request.QueryString("callback") %>({rows:[{"id":"1","stuId":"1","folkName":"\u7236\u4eb2\u5927\u4eba","folkRelation":"\u7236\u5b50","folkCompany":"\u7236\u4eb2\u7684\u5355\u4f4d","folkPosition":"\u5de5\u4eba2","folkTel":"12345678910","folkAddress":"\u7ed9\u5927\u5bb6\u8bf4\u670di\u4e3au\u5346"},{"id":"2","stuId":"1","folkName":"\u6bcd\u4eb2\u5927\u4eba","folkRelation":"\u6bcd\u5b50","folkCompany":"\u6bcd\u4eb2\u7684\u5355\u4f4d","folkPosition":"\u5de5\u4eba","folkTel":"12345678910","folkAddress":"\u5bf9\u65b9\u7b54\u590d"},{"id":"6","stuId":"1","folkName":"\u5144\u957f\u5927\u4eba","folkRelation":"\u5144\u5f1f","folkCompany":"\u65e0","folkPosition":"\u65e0","folkTel":"123456","folkAddress":"\u70ed\u70ed\u70ed\u4ed6 \u5c14\u7279\u8ba9\u4ed6"}]})
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui datagrid跨域加载jsonp数据源