返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

JQueryEasyUI datagrid框架的基本使用

2020-05-22 15:54:14易采站长站整理

今天说说这个datagrid框架的基本使用，这个框架一直以来都是大家比较头疼的框架，尤其是Json数据的拼接，后台前台都很重要，使用这个框架，最重要的是仔细：
无需废话，上代码了：

<link href=”jquery-easyui-1.3.2/themes/default/easyui.css” rel=”stylesheet” type=”text/css” />
<!–easyui最全的样式包也可单独引用你想使用的样式包–>
<link href=”jquery-easyui-1.3.2/themes/icon.css” rel=”stylesheet” type=”text/css” />
<!–easyui自带图片样式包，也可自行添加–>
<script src=”jquery-easyui-1.3.2/jquery-1.8.0.min.js” type=”text/javascript”></script>
<!–我使用的是easyui 1.3.2，基于jquery-1.8.0–>
<script src=”jquery-easyui-1.3.2/jquery.easyui.min.js” type=”text/javascript”></script>
<!–easyui的js包–>
<script src=”jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js” type=”text/javascript”></script>
<!–easyui的中文语言包，默认是英文–>
</head>
<body id=”layoutbody” class=”easyui-layout”>
<div data-options=”region:’north’,title:’North Title’,split:true” style=”height: 100px;”>
</div>
<div data-options=”region:’south’,title:’South Title’,split:true” style=”height: 100px;”>
</div>
<div data-options=”region:’east’,iconCls:’icon-reload’,title:’East’,split:true” style=”width: 100px;”>
</div>
<div data-options=”region:’west’,title:’West’,split:true” style=”width: 100px;”>
</div>
<div data-options=”region:’center’,title:’center title'” href=”HTMLPage.htm” style=”padding: 5px;
background: #eee; overflow: hidden;”><!–这里指向了一个htm页–>
</div>
</body>
</html>

HTMLPage.htm代码：

<script type=”text/javascript” charst=”utf-8″>
//因为layout框架指向href时，只取html页面body中间的部分，所以该页面这样写即可
//有datagrid包含属性较多，所以尽量使用js的方式初始化datagrid框架
$(function () {
$(“#dg”).datagrid({
url: “GetJson.ashx”, //指向一个一般处理程序或者一个控制器，返回数据要求是Json格式，直接赋值Json格式数据也可，我以demo中自带的Json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项
title: “数据展示表格”,
iconCls: “icon-add”,

相关文章 大家在看