用法:
<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
...
</script>
如果使用新API
<script>
...
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
...
</script>
默认参数
{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}
caption:按钮名称,可以为空,string类型
buttonicon:按钮的图标,string类型,必须为UI theme图标
onClickButton:按钮事件,function类型,默认null
position:first或者last,按钮位置
title:string类型,按钮的提示信息
cursor:string类型,光标类型,默认为pointer
id:string类型,按钮id
如果设置多个按钮:
...
jQuery("#grid_id")
.navGrid('#pager',{edit:false,add:false,del:false,search:false})
.navButtonAdd('#pager',{
caption:"Add",
buttonicon:"ui-icon-add",
onClickButton: function(){
alert("Adding Row");
},
position:"last"
})
.navButtonAdd('#pager',{
caption:"Del",
buttonicon:"ui-icon-del",
onClickButton: function(){
alert("Deleting Row");
},
position:"last"
});
...
按钮间的分隔
<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
...
</script>
默认参数:
{sepclass : “ui-separator”,sepcontent: ''}
sepclass:ui-jqgrid的属性名
sepcontent:分隔符的内容
分享到:
相关推荐
jqgrid自定义按钮,jqgrid自定义按钮,jqgrid自定义按钮
jqGrid是一款基于jQuery的开源表格插件,专为数据管理和展示设计,提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点: 1. **基本使用**:...
4. **css**:样式表文件,用于定义jqGrid的外观,包括表格样式、分页样式、按钮样式等。主要文件为"ui.jqgrid.css",定义了基本的样式规则。 三、核心特性 1. **数据操作**:jqGrid支持多种数据操作,如增删改查,...
3. **custbutt.html**:这个文件可能包含自定义按钮的实现,用户可以添加额外的操作按钮,比如导出数据、执行特定查询或者调用自定义函数。 4. **subgrid_grid.html**:子网格功能的示例,当用户点击某个行时,会扩...
- 图标资源:jqGrid可能使用的图标文件,用于按钮、操作状态等。 - 示例和文档:可能包含示例代码和用户手册,帮助开发者了解如何使用和配置jqGrid。 - 兼容性:此版本可能已经过测试,确保与当时主流的浏览器(如IE...
- **自定义功能**:根据需求使用jqGrid提供的API进行扩展,如自定义编辑模板、事件处理等。 4. **最佳实践** - **优化性能**:对于大数据量,考虑使用分页和虚拟化技术,避免一次性加载所有数据。 - **响应式...
通过这个文件,你可以学习如何配置表格列、设置数据源、自定义操作按钮、以及利用其内置的API进行各种操作。 `combine.php`可能是一个用于合并和压缩JavaScript文件的脚本,以优化页面加载性能。在实际项目中,将多...
1. **CSS**:jqGrid的CSS文件负责定义表格样式,包括行、列、表头、按钮等元素的外观。4.4.5版本中的CSS可能包含多种预设皮肤,允许快速切换不同的界面风格。 2. **Plugins**:jqGrid的插件扩展了其核心功能,如行...
这些脚本提供了丰富的API和事件,让开发者能够深入控制网格的各个方面,如添加、编辑、删除记录,以及自定义按钮和工具栏等。 CSS部分位于"css"目录,其中的"ui.jqgrid.css"文件是jqGrid的样式定义,定义了表格的...
- **plugins**:插件目录存放了扩展jqGrid功能的各种插件,如`subgrid`用于子网格,`treegrid`用于树形结构展示,`navigator`提供额外的导航按钮,如添加、删除、编辑等。 - **js**:JavaScript代码的核心部分,...
1. **css** - 这个目录包含jqGrid的样式文件,如ui.jqgrid.css,定义了网格的视觉样式,包括行、列、表头和按钮等元素的样式。通过调整这些CSS,开发者可以定制符合自己项目风格的界面。 2. **src** - 这里存放的是...
通过分析和运行这个 demo,你可以学习如何配置和定制 jQGrid,以适应你的项目需求。例如,你可以看到如何设置数据源、定义列模型、启用分页和搜索功能,以及如何处理编辑和保存操作。这将帮助你快速上手 jQGrid,并...
9. **自定义功能**:除了基本功能外,jqGrid允许用户自定义列模板、添加自定义按钮、扩展编辑器等,以满足个性化需求。 10. **问题解决**:如果在使用过程中遇到问题,可以查看官方文档、社区论坛或者联系提供...
- 表格工具栏:可以添加工具栏来提供额外的操作按钮或搜索输入框。 - 行选择:支持单选或多选行,可进行批量操作。 - 导入导出:支持数据导入导出,如 CSV、Excel 等格式。 4. **使用步骤**: - 引入 jQuery 和...
通过深入研究这个示例,开发者可以学习到如何自定义列、设置数据操作、使用过滤和排序功能,以及如何将 jqGrid 与后端服务器进行通信。对于希望提升网页数据展示和管理能力的开发者而言,这是一个宝贵的资源。
- **plugins**:包含了各种扩展插件,如树形视图、自定义操作按钮等,用于增强jqGrid的功能。 - **js**:主要的JavaScript文件,包括jqGrid的核心库和相关的脚本。 - **src**:源代码目录,对于开发者来说,可以...
这使得开发者能够根据项目需求添加特定的行为,如自定义按钮、弹出对话框等。 4. **多语言支持**:jqGrid 提供了多种语言的本地化文件,便于实现国际化。 5. **主题化**:jqGrid 遵循 jQuery UI 的主题系统,可以...
想换皮却因修改太多感到力不从心,想用新框架又有些不可舍弃的东西,现在这款插件可完美地让项目中的列表变得高大上,支持批量勾选,支持每条自动生成搜索框,自带搜索、重置按钮,可在顶部添加自定义按钮,...
jqGrid还提供了丰富的自定义选项,包括列模板、工具栏、上下文菜单、行选择样式等,使得开发者可以根据项目需求对表格进行个性化配置。不仅如此,jqGrid还兼容多种浏览器,包括IE、Firefox、Chrome、Safari等,确保...