<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="renderer" content="webkit">
<meta name="keywords" content='easyui,jui,jquery easyui,easyui demo,easyui中文'/>
<meta name="description" content='TopJUI前端框架，基于最新版EasyUI前端框架构建，纯HTML调用功能组件，不用写JS代码的EasyUI，专注你的后端业务开发！'/>
<title>TopJUI前端框架 - 不用写JS代码的EasyUI</title>
<!-- 浏览器标签图片 -->
<link rel="shortcut icon" href="./topjui/images/favicon.ico"/>
<!-- TopJUI框架样式 -->
<link type="text/css" href="./topjui/css/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="./topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme"/>
<!-- FontAwesome字体图标 -->
<link type="text/css" href="./static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<!-- jQuery相关引用 -->
<script type="text/javascript" src="./static/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./static/plugins/jquery/jquery.cookie.js"></script>
<!-- TopJUI框架配置 -->
<script type="text/javascript" src="./static/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心 -->
<script type="text/javascript" src="./topjui/js/topjui.core.min.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="./topjui/js/locale/topjui.lang.zh_CN.js"></script>
<!-- 首页js -->
<script type="text/javascript" src="./static/public/js/topjui.index.js" charset="utf-8"></script>
</head>
<body>
<!-- <div id="loading" class="loading-wrap">
<div class="loading-content">
<div class="loading-round"></div>
<div class="loading-dot"></div>
</div>
</div> -->
<table id="tt" data-toggle="topjui-datagrid"></table>
<!--[if lte IE 8]>
<div id="ie6-warning">
<p>您正在使用低版本浏览器，在本页面可能会导致部分功能无法使用，建议您升级到
<a href="http://www.microsoft.com/china/windows/internet-explorer/" target="_blank">IE9或以上版本的浏览器</a>
或使用<a href="http://se.360.cn/" target="_blank">360安全浏览器</a>的极速模式浏览
</p>
</div>
<![endif]-->
<script>
$(function(){
var data = [{}]
$.ajax({
url: 'http://localhost:3000/data',
type: 'GET',
success:function(data) {
data = data
var columnData = []
var columns = []
var da = []
for(var i in data) {
for(var j in data[i]) {
columnData.push({field:j,title:j,width:100})
}
}
$('#tt').iDatagrid({
rowStyler: function(index,row){
if (row){
return 'background-color:#f00;color:#fff;';
}
}
});
$('#tt').iDatagrid({
columns:[columnData],
data: data,
pagination: true
});
}
})
})
</script>
</body>
</html>
//步骤：
//1.利用json-server 来 mock数据
//2.利用jQuery获得data数据，注意是满足官方用例的data数组
如：
$('#tt').iDatagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'代码',width:100},
{field:'name',title:'名称',width:100},
{field:'price',title:'价格',width:100,align:'right'}
]],
data: [
{code:'code1',name:'代码1',price:'price1'},
{code:'code2',name:'代码2',price:'price2'}
]
});
只是简单的demo，很多功能没有体现，第一次发博，请多多体谅