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数据源源代码如下

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数据源

评论(0)Web开发网
阅读(2280)喜欢(0)不喜欢(0)easyui开发技巧