easyUI +datagirdview加载本地json的方式 笔记
2024-06-01 11:22:13
第一种加载代码里面的json数据，json数据就放到script里面
<head><meta charset="UTF-8"><title>Basic Layout - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="../easyui/demo/demo.css"><script type="text/javascript" src="../easyui/jquery.min.js"></script><script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script><script>$(function(){$('#tt').datagrid('loadData', {"total":28,"rows":[{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}]})});</script>
</head><!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic Layout - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="../easyui/demo/demo.css"><script type="text/javascript" src="../easyui/jquery.min.js"></script><script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script><script>$(function(){$('#tt').datagrid('loadData', {"total":28,"rows":[{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}]})});</script>
</head>
<body>
<h2>Basic Layout</h2>
<p>The layout contains north,south,west,east and center regions.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;"><div data-options="region:'north'" style="height:50px"></div><div data-options="region:'south',split:true" style="height:50px;"></div><div data-options="region:'east',split:true" title="East" style="width:100px;"></div><div data-options="region:'west',split:true" title="West" style="width:100px;"></div><div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"><table id="tt" class="easyui-datagrid"data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true"><thead><tr><th data-options="field:'itemid'" width="80">Item ID</th><th data-options="field:'productid'" width="100">Product ID</th><th data-options="field:'listprice',align:'right'" width="80">List Price</th><th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th><th data-options="field:'attr1'" width="150">Attribute</th><th data-options="field:'status',align:'center'" width="60">Status</th></tr></thead></table></div>
</div>
</body>
</html>2、加载指定路径下的json
<table id="tt" class="easyui-datagrid"data-options="url:'../json/datagrid_data.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true"><thead><tr><th data-options="field:'itemid'" width="80">Item ID</th><th data-options="field:'productid'" width="100">Product ID</th><th data-options="field:'listprice',align:'right'" width="80">List Price</th><th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th><th data-options="field:'attr1'" width="150">Attribute</th><th data-options="field:'status',align:'center'" width="60">Status</th></tr></thead></table><!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic Layout - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="../easyui/demo/demo.css"><script type="text/javascript" src="../easyui/jquery.min.js"></script><script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Layout</h2>
<p>The layout contains north,south,west,east and center regions.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;"><div data-options="region:'north'" style="height:50px"></div><div data-options="region:'south',split:true" style="height:50px;"></div><div data-options="region:'east',split:true" title="East" style="width:100px;"></div><div data-options="region:'west',split:true" title="West" style="width:100px;"></div><div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"><table id="tt" class="easyui-datagrid"data-options="url:'../json/datagrid_data.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true"><thead><tr><th data-options="field:'itemid'" width="80">Item ID</th><th data-options="field:'productid'" width="100">Product ID</th><th data-options="field:'listprice',align:'right'" width="80">List Price</th><th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th><th data-options="field:'attr1'" width="150">Attribute</th><th data-options="field:'status',align:'center'" width="60">Status</th></tr></thead></table></div>
</div>
</body>
</html>加载的路径和项目结构：
到此加载成功！
easyUI +datagirdview加载本地json的方式 笔记相关推荐
- 加载本地json文件,并利用批处理调用Chrome显示html
加载本地json文件 1.加载本地json文件 为了调试保存在本地的json数据,需要进行读入.一般使用jQuery来进行,但需要对浏览器进行一点设置. Chrome浏览器中有一个启动选项--allo ...
- 使用Sencha Touch加载本地Json数据
本例没有采用Sencha的mvc模式.只是一个简单的读取加载本地Json数据示例. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel','Ext.dat ...
- Jquery中使用JsonP加载本地json文件解决跨域问题
场景 jquery中直接请求本地json文件时会提示跨域问题. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
- js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
今天农村老家的天气不是很好 而且外面还下雨了,每天只能坐在老家 打开电脑,看看文章,写写文章 今天我给大家带来一篇Flutter加载本地JSON文件教程 本头条核心宗旨 欢迎来到「技术刚刚好」作者,「 ...
- easyui datagrid加载本地数据和网络数据
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
- Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
文章目录 一.前言 二.分析&解决方案 三.Http-Server简介&安装方法 四.启动http本地服务方法 五.附:Http-Server可选配置 一.前言 最近学习eharts制 ...
- easyui使用ajax获取json文件,easyui 加载本地json 文件的方法
1.1使用内置的Camara应用程序捕捉图像 一: Camara应用程序包含的意图过滤器 发布时去掉 debug 和 提醒日志,简单无侵入 在 proguard 文件中加入下面代码,让发布时去掉 de ...
- cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...
- google支持本地ajax,360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
最新文章
- Thinkphp学习笔记-编辑工具Sublime license
- android系统的手机目录
- abap程序（成本分析报表）
- salt-api配置
- Kubernetes API server工作原理
- figma下载_我如何使用Figma，CSS Grid和CSS Flexbox构建登录页面
- Spring AOP 五大通知类型
- 关于有窗口元素和无窗口元素
- 005.在Windows下编程让效率起飞
- SecureCRT连接Linux显示Mysql记录中文乱码
- latex论文模板_国内高校LaTeX学位论文模版大全
- 如何拼局域网所有ip_查看局域网内所有ip
- 一键导出微信所有聊天记录的小工具
- wsus下游服务器状态,计算机长期没有向WSUS报告状态
- 图片格式tif转换jpg
- java的测试岗位_JAVA测试岗位职责
- 软件测试常见的风险,软件测试中常见的风险分析
- 不积跬步，无以至千里 small tips
- 什么是软路由和硬路由，两者的区别有什么？
- SiT5711：±5~±8ppb超高精度Stratum 3E恒温振荡器OCXO，1-60MHz