`

Jquery结合datagrid框架，做分页 。 datagrid api 详解

 
阅读更多

Jquery结合datagrid框架

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
    <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
    <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    <script src="JavaScript.js"></script><!--这个是扩展Jquery的方法-->
    <script src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
</head>
<body id="layoutbody" class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">
    </div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width: 100px;">
    </div>
    <div data-options="region:'west',title:'West',split:true" style="width: 100px;">
    </div>
    <div data-options="region:'center',title:'center title'" href="CenterPage.html" style="background: #eee; overflow: hidden;">
    </div>
</body>

 然后是CenterPage.html框架中的代码，也就是tabs框架中的代码：

<script type="text/javascript" charst="utf-8">
    //因为layout框架指向href时，只取html页面body中间的部分，所以该页面这样写即可
    //有datagrid包含属性较多，所以尽量使用js的方式初始化datagrid框架
    $(function () {
        $("#dg").datagrid({
            url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器，返回数据要求是Json格式，直接赋值Json格式数据也可，我以demo中自带的Json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项
            iconCls: "icon-add",
            fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
            //toolbar设置表格顶部的工具栏，以数组形式设置
            idField: 'id', //标识列，一般设为id，可能会区分大小写，大家注意一下
            loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句
            pagination: true, //显示最下端的分页工具栏
            rownumbers: true, //显示行数 1，2，3，4...
            pageSize: 10, //读取分页条数，即向后台读取数据时传过去的值
            pageList: [10, 20, 30], //可以调整每页显示的数据，即调整pageSize每次向后台请求数据时的数据
            //由于datagrid的属性过多，我就不每个都介绍了，如有需要，可以看它的API
            sortName: "name", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同
            sortOrder: "asc", //正序
            columns: [[
                { field: 'code', title: 'Code', width: 100 },
                { field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true点击该列的时候可以改变升降序
                { field: 'addr', title: 'addr', width: 100 }
            ]],//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看demo
            toolbar: [{//在dategrid表单的头部添加按钮
                text: "添加",
                iconCls: "icon-add",
                handler: function () {
                }
            }, '-', {//'-'就是在两个按钮的中间加一个竖线分割，看着舒服
                text: "删除",
                iconCls: "icon-remove",
                handler: function () {
                }
            }, '-', {
                text: "修改",
                iconCls: "icon-edit",
                handler: function () {
                }
            }, '-']
        });
    });

    //点击查找按钮出发事件
    function searchFunc() {
        alert("123");
        $("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台
    }

    //点击清空按钮出发事件
    function clearSearch() {
        $("#dg").datagrid("load", {});//重新加载数据，无填写数据，向后台传递值则为空
        $("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空
    }
</script>
<div class="easyui-tabs" fit="true" border="false">
    <div title="数据展示表格" border="false" fit="true">
        <div class="easyui-layout" fit="true" border="false">
            <!--由于查询需要输入条件，但是以toolbar的形式不好，所以我们在Layout框架的头部north中书写查询的相关信息-->
            <!-- 这里我们尽量使其展示的样式与toolbar的样式相似，所以我们先查找toolbar的样式，并复制过来-->
            <div data-options="region:'north',title:'高级查询'" style="height: 100px; background: #F4F4F4;">
                <form id="searchForm">
                    <table>
                        <tr>
                            <th>用户姓名：</th>
                            <td>
                                <input name="name" /></td>
                        </tr>
                        <tr>
                            <th>创建开始时间</th>
                            <td>
                                <input class="easyui-datetimebox" editable="false" name="subStartTime" /></td>
                            <!--由于datebox框架上面的数据必须是时间格式的，所以我们用editable="false"来禁止用户手动输入，以免报错-->
                            <th>创建结束时间</th>
                            <td>
                                <input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td>
                            <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();">查找</a></td>
                            <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();">清空</a></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options="region:'center',split:false">
                <table id="dg">
                </table>
            </div>
        </div>
    </div>
</div>

 
Jquery的扩展代码：

var sy = $.extend({}, sy);/*定义一个全局变量*/

sy.serializeObject = function (form) { /*将form表单内的元素序列化为对象，扩展Jquery的一个方法*/
    var o = {};
    $.each(form.serializeArray(), function (index) {
        if (o[this['name']]) {
            o[this['name']] = o[this['name']] + "," + this['value'];
        } else {
            o[this['name']] = this['value'];
        }
    });
    return o;
};

 

 datagrid api 详解

 

扩展自$.fn.panel.defaults，用 $.fn.datagrid.defaults重写了 defaults 。

依赖

  • panel
  • resizable
  • linkbutton
  • pagination

用法

 

<table id="tt"></table> 

$('#tt').datagrid({   

	 url:'datagrid_data.json',   

	 columns:[[   

		 {field:'code',title:'Code',width:100},   

		 {field:'name',title:'Name',width:100},   

		 {field:'price',title:'Price',width:100,align:'right'}   

	 ]]   

});
 

 

数据表格（DataGrid）的特性

其特性扩展自panel，下列是为 datagrid增加的特性

 

 

名称

类型

说明

默认值

columns

array

datagrid 的column的配置对象，更多详细请参见 column 的特性。

null

frozenColumns

array

和列的特性一样，但是这些列将被冻结在左边。

null

fitColumns

boolean

True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。

false

striped

boolean

True 就把行条纹化。（即奇偶行使用不同背景色）

false

method

string

请求远程数据的 method 类型。

post

nowrap

boolean

True 就会把数据显示在一行里。

true

idField

string

标识字段。

null

url

string

从远程站点请求数据的 URL。

null

loadMsg

string

当从远程站点加载数据时，显示的提示信息。

Processing, please wait …

pagination

boolean

True 就会在 datagrid 的底部显示分页栏。

false

rownumbers

boolean

True 就会显示行号的列。

false

singleSelect

boolean

True 就会只允许选中一行。

false

pageNumber

number

当设置了pagination特性时，初始化页码。

1

pageSize

number

当设置了pagination特性时，初始化页码尺寸。

10

pageList

array

当设置了pagination特性时，初始化页面尺寸的选择列表。

[10,20,30,40,50]

queryParams

object

当请求远程数据时，发送的额外参数。

{}

sortName

string

定义可以排序的列。

null

sortOrder

string

定义列的排序顺序，只能用'asc' 或 'desc'。

asc

remoteSort

boolean

定义是否从服务器给数据排序。

true

showFooter

boolean

定义是否显示一行页脚。

false

rowStyler

function

返回例如 'background:red'的样式，该函数需要两个参数：
rowIndex：行的索引，从 0 开始。
rowData：此行相应的记录。

 

loadFilter

function

返回过滤的数据去显示。这个函数需要一个参数'data'，表示原始数据。

你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有'total' 和 'rows'特性。

 

editors

object

定义编辑行时的editor 。

预定义的 editor

view

object

定义datagrid的 view 。

默认的 view

 

列（Column）的特性

DataGrid 的Column是一个数组对象，它的每个元素也是一个数组。数组元素的元素是一个配置对象，它定义了每个列的字段。

代码示例： 
 columns:[[   

     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   

     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   

     {title:'Item Details',colspan:4}   

 ],[   

     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   

     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   

     {field:'attr1',title:'Attribute',width:100},   

     {field:'status',title:'Status',width:60}   

 ]]

 

名称

类型

说明

默认值

title

string

列的标题文字。

undefined

field

string

列的字段名。

undefined

width

number

列的宽度。

undefined

rowspan

number

指一个单元格占据多少行。

undefined

colspan

number

指一个单元格占据多少列。

undefined

align

string

指如何对齐此列的数据，可以用'left'、'right'、'center'。

undefined

sortable

boolean

True 就允许此列被排序。

undefined

resizable

boolean

True 就允许此列被调整尺寸。

undefined

hidden

boolean

True 就隐藏此列。

undefined

checkbox

boolean

True 就显示 checkbox。

undefined

formatter

function

单元格的格式化函数，需要三个参数：
value：字段的值。
rowData：行的记录数据。
rowIndex：行的索引。

undefined

styler

function

单元格的样式函数，返回样式字符串来自定义此单元格的样式，例如'background:red'。此函数需要三个参数：
value：字段的值。
rowData：行的记录数据。
rowIndex：行的索引。

undefined

sorter

function

自定义字段的排序函数，需要两个参数：
a：第一个字段值。
b：第二个字段值。

undefined

editor

string,object

指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性：
type：string，编辑类型，可能的类型是：

 text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options：对象，编辑类型对应的编辑器选项。

undefined

 

编辑器（Editor）

用 $.fn.datagrid.defaults.editors重写了 defaults。

每个编辑器有下列行为：

名称

参数

说明

init

container, options

初始化编辑器并且返回目标对象。

destroy

target

如果必要就销毁编辑器。

getValue

target

从编辑器的文本返回值。

setValue

target , value

给编辑器设置值。

resize

target , width

如果必要就调整编辑器的尺寸。

 

例如，文本编辑器（text editor）像下面这样定义：

$.extend($.fn.datagrid.defaults.editors, {   

    text: {   

        init: function(container, options){   

            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   

            return input;   

        },   

        getValue: function(target){   

            return $(target).val();   

        },   

        setValue: function(target, value){   

            $(target).val(value);   

        },   

        resize: function(target, width){   

            var input = $(target);   

            if ($.boxModel == true){   

                input.width(width - (input.outerWidth() - input.width()));   

            } else {   

                input.width(width);   

            }   

        }   

    }   

});

 

数据表格视图（DataGrid View）

用 $.fn.datagrid.defaults.view重写了 defaults。

view 是一个对象，它告诉datagrid 如何呈现行。这个对象必须定义下列方法。

名称

参数

说明

render

target, container, frozen

当数据加载时调用。
target：DOM 对象，datagrid 对象。
container：行的容器。
frozen：表示是否呈现冻结容器。

renderFooter

target, container, frozen

这是呈现行脚选项的函数。

renderRow

target, fields, frozen, rowIndex, rowData

这是选项的函数，将会被render 函数调用。

refreshRow

target, rowIndex

定义如何刷新指定的行。

onBeforeRender

target, rows

视图被呈现前触发。

onAfterRender

target

视图被呈现后触发。

 

 

事件

其事件扩展自 panel，下列是为datagrid增加的事件。

名称

参数

说明

onLoadSuccess

data

当数据加载成功时触发。

onLoadError

none

加载远程数据发生某些错误时触发。

onBeforeLoad

param

发送加载数据的请求前触发，如果返回 false加载动作就会取消。

onClickRow

rowIndex, rowData

当用户点击一行时触发，参数包括：
rowIndex：被点击行的索引，从 0 开始。
rowData：被点击行对应的记录。

onDblClickRow

rowIndex, rowData

当用户双击一行时触发，参数包括：
rowIndex：被双击行的索引，从 0 开始。
rowData：被双击行对应的记录。

onClickCell

rowIndex, field, value

当用户单击一个单元格时触发。

onDblClickCell

rowIndex, field, value

当用户双击一个单元格时触发。

onSortColumn

sort, order

当用户对一列进行排序时触发，参数包括：
sort：排序的列的字段名
order：排序的列的顺序

onResizeColumn

field, width

当用户调整列的尺寸时触发。

onSelect

rowIndex, rowData

当用户选中一行时触发，参数包括：
rowIndex：选中行的索引，从 0 开始
rowData：选中行对应的记录

onUnselect

rowIndex, rowData

当用户取消选择一行时触发，参数包括：
rowIndex：取消选中行的索引，从 0 开始
rowData：取消选中行对应的记录

onSelectAll

rows

当用户选中全部行时触发。

onUnselectAll

rows

当用户取消选中全部行时触发。

onBeforeEdit

rowIndex, rowData

当用户开始编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录

onAfterEdit

rowIndex, rowData, changes

当用户完成编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录
changes：更改的字段/值对

onCancelEdit

rowIndex, rowData

当用户取消编辑一行时触发，参数包括：
rowIndex：编辑行的索引，从 0 开始
rowData：编辑行对应的记录

onHeaderContextMenu

e, field

当datagrid的头部被右键单击时触发。

onRowContextMenu

e, rowIndex, rowData

当右键点击行时触发。

方法

名称

参数

说明

options

none

返回options 对象。

getPager

none

返回pager 对象。

getPanel

none

返回 panel 对象。

getColumnFields

frozen

返回列的字段，如果frozen 设定为 true，冻结列的字段被返回。

getColumnOption

field

返回指定列的选项。

resize

param

调整尺寸和布局。

load

param

加载并显示第一页的行，如果指定param参数，它将替换queryParams 特性。

reload

param

重新加载行，就像 load 方法一样，但是保持在当前页。

reloadFooter

footer

重新加载脚部的行。

loading

none

显示正在加载状态。

loaded

none

隐藏正在加载状态。

fitColumns

none

使列自动展开/折叠以适应 datagrid 的宽度。

fixColumnSize

none

固定列的尺寸。

fixRowHeight

index

固定指定行的高度。

loadData

data

加载本地数据，旧的行会被移除。

getData

none

返回加载的数据。

getRows

none

返回当前页的行。

getFooterRows

none

返回脚部的行。

getRowIndex

row

返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值。

getSelected

none

返回第一个选中的行或者 null。

getSelections

none

返回所有选中的行，当没有选中的记录时，将返回空数组。

clearSelections

none

清除所有的选择。

selectAll

none

选中当前页所有的行。

unselectAll

none

取消选中当前页所有的行。

selectRow

index

选中一行，行索引从 0 开始。

selectRecord

idValue

通过 id 的值做参数选中一行。

unselectRow

index

取消选中一行。

beginEdit

index

开始对一行进行编辑。

endEdit

index

结束对一行进行编辑。

cancelEdit

index

取消对一行进行编辑。

getEditors

index

获取指定行的编辑器们。每个编辑器有下列特性：
actions：编辑器能做的动作们。
target：目标编辑器的jQuery对象。
field：字段名。
type：编辑器的类型。

getEditor

options

获取指定的编辑器， options 参数包含两个特性：
index：行的索引。
field：字段名。

refreshRow

index

刷新一行。

validateRow

index

验证指定的行，有效时返回 true。

updateRow

param

更新指定的行， param 参数包含下列特性：
index：更新行的索引。
row：行的新数据。

appendRow

row

追加一个新行。

insertRow

param

插入一个新行， param 参数包括下列特性：
index：插入进去的行的索引，如果没有定义，就追加此新行。
row：行的数据。

deleteRow

index

删除一行。

getChanges

type

获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。

当type 参数没有分配时，返回所有改变的行。

acceptChanges

none

提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。

rejectChanges

none

回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。

mergeCells

options

把一些单元格合并为一个单元格，options参数包括下列特性：
index：列的索引。
field：字段名。
rowspan：合并跨越的行数。
colspan：合并跨越的列数。

showColumn

field

显示指定的列。

hideColumn

field

隐藏指定的列。

 

 

 simple

$('#datagrid-tb').datagrid({
	singleSelect : false,
	url : ctx + '/accounting/voucherInquiry/ajaxVoucherInquiryList',
	pagination : true,
	pageSize : 20,
	queryParams : {
		name : $("[name='search_name']").val(),
		description : $("[name='search_description']").val(),
		status : $("[name='search_status']").val()
	},
	columns : [ [ {
		field : 'id',
		hidden : true
	}, {
		field : 'status',
		hidden : true
	}, {
		field : 'approve_status',
		hidden : true
	}, {
		field : 'au_id',
		hidden : true
	}, {
		field : 'calendar_line_id',
		hidden : true
	}, {
		field : 'ck',
		checkbox : true
	}, {
		field : 'voucher_no',
		title : '<i18n:findValue defaultValue="编号" i18nHashKey="nothing" />',
		halign : 'center',
		align : 'right',
		width : 80

	}, {
		field : 'name',
		title : '<i18n:findValue defaultValue="名称" i18nHashKey="nothing" />',
		width : 80,
		halign : 'center'
	}, {
		field : 'description',
		title : '<i18n:findValue defaultValue="说明" i18nHashKey="nothing" />',
		width : 80,
		halign : 'center'
	}, {
		field : 'category_lable',
		title : '<i18n:findValue defaultValue="类别" i18nHashKey="nothing" />',
		width : 80,
		halign : 'center',
		formatter : function(value, row, index) {
			return addTooltip2(value, 20);
		}
	}, {
		field : 'source_lable',
		title : '<i18n:findValue defaultValue="源" i18nHashKey="nothing" />',
		width : 80,
		halign : 'center',
		formatter : function(value, row, index) {
			return addTooltip2(value, 20);
		}
	}, {
		field : 'gold_Label',
		halign : 'center',
		title : '<i18n:findValue defaultValue="金额" i18nHashKey="nothing" />',
		align : 'right',
		width : 80,
		formatter : function(value, row, index) {

			if (value.indexOf('E') != -1) {
				value = value.replace('E', '');
			}

			return Number(value).toFixed(6);
		}
	}, {
		field : 'status_Label',
		halign : 'center',
		title : '<i18n:findValue defaultValue="状态" i18nHashKey="nothing" />',
		width : 80
	}

	] ],

	onClickRow : function(rowIndex, rowData) {
		var obj = $("#datagrid-tb").datagrid("getSelected");
                alert(obj);
	},
	onSelect : function(rowIndex, rowData) {
                var obj = $("#datagrid-tb").datagrid("getSelected");
                alert(obj);
	},
 	onDblClickRow : function(rowIndex, rowData) {
 		update();
	},
	// 根据单 / 双行号的设置不同背景颜色
	onLoadSuccess : function(data) {
		paint_grid_row();
	}
});

  

 

 

 

 

 

 

 

 

 

 

 

 

分享到：
| SQL 相关(一)
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    jquery easyui datagrid demo 详解

    jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列丰富的组件，使得开发者可以轻松构建用户界面，而 Datagrid 是其中非常重要的一个组件，常用于数据展示和管理。本篇文章将详细解析 jQuery EasyUI ...

    Jquery Datagrid 动态分页以及CRUD（增删改查）

    《jQuery Datagrid动态分页与CRUD操作详解》 在Web开发中，数据展示和管理是常见的需求，jQuery Datagrid是一款强大的表格插件，能够帮助我们实现数据的动态分页、增删改查等基本功能。这篇教程将深入探讨如何使用...

    Jquery 插件datagrid最新版本下载

    **jQuery Datagrid插件详解** jQuery Datagrid是一款广泛使用的数据网格插件，它基于jQuery库，为Web开发者提供了强大的数据展示和操作功能。这个插件允许用户以表格形式展示大量数据，同时支持分页、排序、过滤、...

    JqueryDataGridDemo分页

    **jQuery DataGrid 分页详解** 在Web开发中，数据展示是一项关键任务，尤其是在处理大量数据时。jQuery DataGrid是一款强大的JavaScript插件，用于创建可排序、可搜索且具有分页功能的数据网格。在这个...

    easy ui datagrid项目完整源代码

    《jQuery Easy UI Datagrid 完整项目源代码详解》 jQuery Easy UI 是一款基于 jQuery 的前端框架，它提供了一系列的组件，使得开发者可以快速构建出美观且功能丰富的 Web 应用程序。其中，Datagrid 是 Easy UI 的...

    jquery-easyui-datagrid

    **jQuery EasyUI Datagrid 插件详解** jQuery EasyUI 是一套基于 jQuery 的用户界面插件集合，它使得开发者能够快速构建具有专业外观和交互性的 Web 应用程序。`datagrid` 是其中的一个重要组件，主要用于展示表格...

    JQuery-esqyUI中文-1.2.5API.CHM

    **jQuery EasyUI中文API 1.2.5详解** jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了丰富的用户界面组件，使得开发者可以快速构建出美观且功能强大的Web应用。这个压缩包包含了一系列与EasyUI相关的文件，...

    datagrid分页

    在本篇文章中，我们将详细介绍如何使用 jQuery EasyUI 框架中的 DataGrid 实现分页功能。数据分页是 Web 应用程序中常见且重要的功能之一，它可以帮助用户更有效地浏览和管理大量数据。通过本篇文章的学习，你将能够...

    jQuery EasyUI框架中的Datagrid数据表格组件结构详解

    jQuery EasyUI是一个基于jQuery库的前端开发框架，它为开发者提供了丰富的组件，使得构建功能完善的Web应用程序变得更为简单。在jQuery EasyUI中，Datagrid组件是一个核心组件，用于展示和管理表格数据，常用于数据...

    jquery-easyui官方示例及API文档中文版

    《jQuery EasyUI官方示例与API文档中文版详解》 jQuery EasyUI是一个基于jQuery的UI框架，它提供了丰富的组件和方便的API，使得开发者能够快速构建功能强大的Web应用。在这个"jquery-easyui-1.5.4.5"版本中，包含了...

    jquery-easyui-1.4 + 中文api 内有demo

    《jQuery EasyUI 1.4：实用前端框架与中文API详解》 jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的组件和易用的API，使得开发者能够快速构建功能完善的Web应用程序。在这个版本1.4中，我们看到了...

    jquery-easyui1.4.5含API中文

    **jQuery EasyUI 1.4.5 API 中文版详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一套完整的用户界面组件，能够帮助开发者快速构建具有专业外观和功能的Web应用。EasyUI 1.4.5 版本是这个框架的一个...

    一个JQuery +Ajax 封闭的一个GridView控件DataGrid

    【标题】：jQuery + Ajax 实现的GridView控件DataGrid详解 在Web开发中，GridView是一种常见的数据展示控件，通常用于显示数据库或其他数据源中的数据。本篇将深入探讨如何利用jQuery和Ajax技术实现一个功能丰富的...

    jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI是一个基于jQuery的轻量级前端开发框架，它为开发者提供了丰富的组件，简化了Web应用程序的前端构建过程。DataGrid是jQuery EasyUI中的一个核心组件，常用于展示和管理表格数据，具有分页、排序、筛选...

    Jquery-easyui的datagrid中文文档

    JQuery-easyui中的`datagrid`组件是一种强大的数据展示工具，它能够高效地处理和展示大量数据，支持分页、排序、搜索等多种功能。此文档旨在详细介绍`datagrid`的各种配置选项和属性，帮助开发者更好地理解和运用这...

    Jquery easyui项目框架

    **jQuery EasyUI 项目框架详解** jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个项目框架是个人实践成果，旨在展示...

    jquery\jqueryEasyui-api

    **jQuery和jQuery EasyUI API详解** jQuery是一款广泛应用于前端开发的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画设计以及Ajax交互。jQuery的核心特性是选择器，这使得开发者能更方便地选取...

    jQuery EasyUI 1.5 版 API 中文版

    jQuery EasyUI 是一款基于 jQuery 的前端开发框架，它简化了网页界面的构建，提供了丰富的组件和易用的API。这个1.5版本的API中文版是开发者的重要参考资料，旨在帮助国内用户更好地理解和使用EasyUI。 1. **jQuery...

Magicbox
Global site tag (gtag.js) - Google Analytics