DataGrid的用法(一)基本用法

DataGrid入门用法分享
作者将之前总结的DataGrid入门用法分享到优快云。介绍了DataGrid基本使用、修改Head、分页显示、编辑内容等多方面用法,还给出基本用法的代码示例及运行结果,并提供代码和数据库下载链接,方便读者本地运行。

以前工作中曾总结过DataGrid的用法,可一直被我扔在一边,今日无意中又翻出来,于是想将此文放到csdn,与大家共享,并供大家批判。
此文是DataGrid的入门用法,若你DataGrid很熟悉了,可以不用看了。

目录:
1、DataGrid的基本使用
2、修改DataGrid的Head
3、单击DataGrid,弹出对话框显示此item的详细信息
4、DataGrid的分页显示
5、直接在DataGrid中进行能够编辑
6、如何修改DataGrid中内容的显示
7、如何在DataGrid中新增加一行
8、如何在DataGrid中排序
9、如何在DataGrid中加入checkbox

DataGrid的基本用法:最好的文档,就是代码。
Class01.aspx

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>

<Script Language="C#" Runat="Server">
public void Page_Load()
{
 String strSql = "";
 String strConnect = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C://Inetpub//wwwroot//DataGrid//school.mdb";
          
 OleDbConnection objConnection = new OleDbConnection(strConnect);
 objConnection.Open();

 OleDbCommand objCommand = new OleDbCommand();
 objCommand.Connection = objConnection;
 objCommand.CommandType = CommandType.Text;
  
 OleDbDataAdapter sda = new OleDbDataAdapter();
    sda.SelectCommand = objCommand;
    DataSet ds = new DataSet();
   
    strSql = "Select ID, Name, Chinese, Math, English From ScoreSheet";
    objCommand.CommandText = strSql;
    sda.Fill(ds, "ScoreSheet");
   
 DataGrid1.DataSource=ds.Tables["ScoreSheet"].DefaultView;
 DataGrid1.DataBind(); 

    objConnection.Close();
}
</Script>

<asp:DataGrid id="DataGrid1" runat="server" >
</asp:DataGrid>

运行结果:

实在很简单吧,为了方便大家,本文的所有代码及其数据库,我提供了下载,大家可以放到本地的环境中运行看看,这样会更直观一些。
http://www.chinacurrents.net/adrift/other/datagrid.rar

第一讲就到此了,基本用法就是基本用法,多一句代码都不写:)

敬请关注后面的内容。

漂零 freespider@21cn.com

### 关于EssyUI DataGrid的使用方法和示例 EssyUI 是个基于 jQuery EasyUI 的前端框架,提供了丰富的 UI 组件来帮助开发者快速构建网页应用。DataGrid 是其中个重要组件,用于以表格形式展示数据[^2]。 以下是关于 EssyUI DataGrid基本用法和示例: #### 1. 基本 HTML 结构 首先需要定义个容器元素(通常是 `<table>` 或 `<div>`),并为其设置 ID,以便后续通过 JavaScript 初始化 DataGrid。 ```html <table id="datagrid"></table> ``` #### 2. 引入必要的资源文件 在使用 EssyUI DataGrid 之前,必须确保正确引入了相关的 CSS 和 JS 文件。 ```html <link rel="stylesheet" href="https://www.example.com/themes/default/easyui.css"> <link rel="stylesheet" href="https://www.example.com/themes/icon.css"> <script src="https://www.example.com/jquery.min.js"></script> <script src="https://www.example.com/jquery.easyui.min.js"></script> ``` #### 3. 初始化 DataGrid 通过 JavaScript 初始化 DataGrid,并配置相关属性。 ```javascript $('#datagrid').datagrid({ url: 'data.json', // 数据源 URL method: 'get', title: 'DataGrid 示例', iconCls: 'icon-save', width: 700, height: 'auto', fitColumns: true, singleSelect: true, pagination: true, pageSize: 10, pageList: [10, 20, 30], columns: [[ { field: 'id', title: 'ID', width: 100 }, { field: 'name', title: '名称', width: 150 }, { field: 'age', title: '年龄', width: 100 } ]] }); ``` #### 4. 数据源格式 DataGrid 支持从远程服务器加载 JSON 格式的数据。以下是个简单的 JSON 数据示例。 ```json { "total": 2, "rows": [ { "id": 1, "name": "张三", "age": 28 }, { "id": 2, "name": "李四", "age": 32 } ] } ``` #### 5. 动态加载数据 如果需要动态加载数据,可以通过 `load` 方法实现。 ```javascript $('#datagrid').datagrid('load', { category: '技术', limit: 10 }); ``` #### 6. 事件处理 DataGrid 提供了多种事件,例如点击行、选择行等。 ```javascript $('#datagrid').datagrid({ onClickRow: function(index, row) { console.log('点击了第 ' + (index + 1) + ' 行'); } }); ``` #### 7. 自定义工具栏 可以为 DataGrid 添加自定义工具栏按钮。 ```javascript $('#datagrid').datagrid({ toolbar: [{ text: '新增', iconCls: 'icon-add', handler: function() { alert('新增按钮被点击'); } }, '-', { text: '删除', iconCls: 'icon-remove', handler: function() { alert('删除按钮被点击'); } }] }); ``` ### 注意事项 - 确保页面中正确引入了 jQuery 和 EasyUI 的相关文件。 - 如果需要支持中文,请加载对应的语言包。 - DataGrid 的性能与数据量密切相关,建议对大数据量进行分页处理[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值