EasyUi中datagrid使用心得_datagrid rownumbers-CSDN博客

本文链接：https://blog.csdn.net/wz15660175331/article/details/78675701

前言：easyui是一个非常实用的java前端工具，虽然写起来没有一点技术含量，纯粹是复制粘贴过去的，但是用起来非常方便，里面的内容也有很多，今天这次主要写一下使用datagrid的具体内容，记录下datagrid的使用心得
首先，引用些easyui的资源文件

这里写图片描述

easyui资源文件：[easyui资源文件]
(http://download.csdn.net/download/wz15660175331/10139180)

这里写图片描述

Datagrid的主要属性：
data：数据加载
method：该方法类型请求远程数据。
url：一个URL从远程站点请求数据。
rownumbers：如果为true，则显示一个行号列。
singleSelect：如果为true，则只允许选择一行。
checkOnSelect：如果为true，当用户点击行的时候该复选框就会被选中或取消选中。

第一种方式：通过 table 标签创建DataGrid控件。在表格内使用 th 标签定义列。

<div id="tt" class="easyui-tabs" style="height: 1000px">
            <table id = "dg" class="easyui-datagrid" style="width: 500px; height: 300px"
                data-options="url:'api/tree',fitColumns:true,rownumbers:true,
                checkOnSelect:true">
                <thead>
                        //field:对应json文件内的键
                        <th data-options="field:'id',width:100">id</th>
                        <th data-options="field:'text',width:100">text</th>
                        <th data-options="field:'url',width:100,formatter:format">url</th>
                    </tr>
                </thead>
            </table>
        </div>

第二种方式：也允许使用Javascript去创建DataGrid控件

$('#dg').datagrid({
            url:'api/tree',
            fitColumns:true,
            rownumbers:true,
            checkOnSelect:true,
            //toolbar 顶部工具栏的DataGrid面板。
            toolbar: [{
                iconCls: 'icon-edit',
                handler: function(){alert('编辑按钮')}
            },'-',{
                iconCls: 'icon-help',
                handler: function(){alert('帮助按钮')}
            }],
            columns:[[
                {field:'id',title:'id', width:80},
                {field:'text',title:'text', width:80},
                {field:'url',title:'url', width:80,
                //单元格formatter(格式化器)函数
                    formatter: function(value,row,index){

                        return value+value;
                    }
                }
            ]]

        });