使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

DataGrid

Document
Native
Basic DataGrid
Transform DataGrid from Table
Row Border
DataGrid Selection
CheckBox Selection on DataGrid
DataGrid with Toolbar
DataGrid Complex Toolbar
Custom DataGrid Pager
Client Side Pagination
Multiple Sorting
Column Group
Aligning Columns in DataGrid
Frozen Columns in DataGrid
Format DataGrid Columns
Frozen Rows in DataGrid
Row Editing in DataGrid
Cache Editor for DataGrid
DataGrid Row Style
DataGrid Cell Style
Footer Rows in DataGrid
Merge Cells for DataGrid
Context Menu on DataGrid
Fluid DataGrid
Advanced
DataGrid Filter Row
Remote Filtering on DataGrid
Server Side Pagination
Master Detail
SubGrid
Nested SubGrid
Large Data
Card View
Buffer View
Virtual Scroll View
Virtual Scroll View(Detail Rows)
Cell Editing in DataGrid
Group Rows in DataGrid
Sorting
1.x Plus
2.x Plus
默认样式
简约样式
时尚样式
Extend

Basic DataGrid

The DataGrid is created from markup, no JavaScript code needed.

示例:

代码:

					


<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
        data-options="
            singleSelect:true,
            collapsible:true,
            url:'examples/datagrid/datagrid_data1.json',
            method:'get'
        ">
    <thead>
        <tr>
            <th data-options="field:'itemid',width:80">Item ID</th>
            <th data-options="field:'productid',width:100">Product</th>
            <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
            <th data-options="field:'attr1',width:250">Attribute</th>
            <th data-options="field:'status',width:60,align:'center'">Status</th>
        </tr>
    </thead>
</table>