这是我的第一篇CSND博客文章,最近一直在学习EasyUI,这个插件官方的教程是基于PHP的后台,而我是学习.NET的,所以希望通过自己的整理与与汇总能够帮助到,.Net的想使用EasyUI的人!
准备工具:
1.jQuery EasyUI 1.4.5版本离线教程
2.jQuery EasyUI 1.4.5插件
下面是通过JQuery的方式添加一个DataGrid的步骤:
(1)新建一个webfrom窗体,添加jQuery EasyUI的相关引用,用JQuery的方式添加DataGrid
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGridLoadDataFormSql.aspx.cs" Inherits="web.Test.DataGridLoadDataFormSql" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../EasyUI/jquery.min.js"></script>
<script src="../EasyUI/jquery.easyui.min.js"></script>
<link href="../EasyUI/themes/icon.css" rel="stylesheet" />
<script src="../EasyUI/locale/easyui-lang-zh_CN.js"></script>
<link href="../EasyUI/themes/default/easyui.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('#tb1').datagrid({
url:'../Test/GetDataFormSql.ashx',
width: 400,
title: '设备管理',
method:'get',
columns: [[
{ field: 'numID', title: '设备编号', width: 150 },
{ field: '型号', title: '型号', width: 150 },
{ field: '单价', title: '价格', width: 100 }
]],
pagination: true,
pageSize:5,
pageList:[5,10,15]
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tb1"></table>
&