EasyUI datagrid控件的基本使用
首先運行一個它的datagrid示例；
出現(xiàn)下圖錯誤；
? ? 這是因為它的示例把json數(shù)據(jù)放到一個單獨.json文件，然后加載，瀏覽器默認不允許加載本地文件；
下面來看一下此控件的基本使用；
首先做一個基本html文件，不帶什么功能，只是把庫文件包含進來；
<!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"類即可；
<table class="easyui-datagrid"><thead><tr><th data-options="field:'name'">姓名</th><th data-options="field:'age'">年齡</th><th data-options="field:'part'">部門</th></tr></thead><tbody><tr><td>小李</td><td>25</td><td>技術(shù)部</td></tr><tr><td>小王</td><td>25</td><td>技術(shù)部</td></tr><tr><td>小張</td><td>27</td><td>市場部</td></tr></tbody> </table>運行如下；
?
也可以用js來定義一個datagrid控件；
<table id="mydg"></table>
? ? 定義一個table，指定它的id；
然后如下；
<script type="text/javascript"> var mydatas =? [{"name":"小李","age":"205","part":"技術(shù)部"},{"name":"小王","age":"205","part":"技術(shù)部"},{"name":"小張","age":"207","part":"市場部"} ]; $('#mydg').datagrid({data: mydatas,columns:[[{field:'name',title:'姓名',width:150},{field:'age',title:'年齡',width:150},{field:'part',title:'部門',width:150,align:'right'}]] }); </script>可以為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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DOS 批处理命令学习1
- 下一篇： C# 委托基本例子