當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

EasyUI datagrid控件的基本使用

發(fā)布時間：2025/4/14 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 EasyUI datagrid控件的基本使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

首先運行一個它的datagrid示例；

出現(xiàn)下圖錯誤；

? ? 這是因為它的示例把json數(shù)據(jù)放到一個單獨.json文件，然后加載，瀏覽器默認(rèn)不允許加載本地文件；

下面來看一下此控件的基本使用；

首先做一個基本html文件，不帶什么功能，只是把庫文件包含進(jìn)來；

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>DataGrid</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><script type="text/javascript" src="../../jquery.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body><h2>My DataGrid</h2><script type="text/javascript"></script> </body> </html>

基本的，可以使用table來做一個datagrid，只要指定"easyui-datagrid"類即可；

運行如下；

也可以用js來定義一個datagrid控件；

? ? 定義一個table，指定它的id；

然后如下；

可以為datagrid添加工具條；

為datagrid添加toolbar屬性，

$('#dg').datagrid({
? ? toolbar: '#mytb'

? ? .......
});

之前先定義一個div，定義它的id，在其中定義按鈕；
<div id="mytb">
? ? <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">編輯</a>
? ? <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
? ? <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">幫助</a>
</div>

運行如下，

如果要觸發(fā)工具條按鈕的前端事件，則這么寫，

$('#mydg').datagrid({
? ? toolbar: [{
? ? ? ? iconCls: 'icon-add',
? ? ? ? handler: function(){alert('添加數(shù)據(jù)')}
? ? }],
。。。。。。
});

運行如下；

總結(jié)

以上是生活随笔為你收集整理的EasyUI datagrid控件的基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。