动态数据绑定:根据字段类型自定义datagrid控件
在本文档中,主要讨论了如何在DataGrid(数据表格)中实现动态加载不同类型的编辑控件,以适应数据库字段的不同类型。这个场景的核心在于根据数据项的SOBJ_TYPE属性(可能代表字符、数值、日期或判断类型)来动态添加文本框(text)、日历选择框(datebox)、数字输入框(numberbox)等控件。以下将详细解释实现过程: 1. **数据绑定与初始化**: 首先,通过`$.each`循环遍历数据库查询返回的数据(data.rows),对于每一行数据,我们调用`removeEditor`方法移除原有的编辑器实例,确保每次只针对当前字段类型添加新的编辑器。 2. **根据不同字段类型添加编辑器**: - 对于字符型(SOBJ_TYPE == 'C'),创建一个简单的文本框(`type: 'text'`),设置宽度为300像素。 - 对于数值型(SOBJ_TYPE == 'N'),根据SOBJ_PREC属性设置精度,创建一个带有限制范围的数字输入框(`type: 'numberbox'`),确保最小值为0,并限制小数点后的位数。 - 对于日期型(SOBJ_TYPE == 'D'),扩展默认的日期选择框按钮,添加一个清空日期的自定义按钮,当点击时清除日期并隐藏面板(`editable: false`). 3. **触发编辑操作**: 在添加编辑器后,选择当前行(`selectRow`)并执行编辑细胞(`editCell`)操作,使用户可以直接在添加的控件上进行编辑。 4. **代码封装与执行**: 文档中提到的`addEditor`函数是一个自定义方法,它接受DataGrid的引用、字段名和编辑器配置作为参数。这部分代码封装了整个动态加载和编辑的逻辑,使得可以根据不同的数据行快速适应不同类型的字段编辑。 总结来说,这篇文档提供了一种实用的方法,用于根据数据库查询结果动态调整DataGrid中的编辑控件,提高了用户体验和数据展示的灵活性。开发者可以参考此示例,将类似功能应用到自己的项目中,以满足不同业务场景的需求。
var self = this;
$.each(data.rows, function (index, item) {
self.removeEditor($("#gridZDY"), 'EDITOR');
if (item.SOBJ_TYPE == 'C') { //文本框
self.addEditor($("#gridZDY"), {
field: 'EDITOR',
editor: {
type: 'text', options: {width: '300px'}
}
});
}
else if (item.SOBJ_TYPE == 'B') {
}
else if (item.SOBJ_TYPE == 'D') {//日历盒
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: '清空', //按钮文本
handler: function (target) {
$(target).datebox('setValue', '');
$(target).datebox('hidePanel', "");
}
});
self.addEditor($("#gridZDY"), {
field: 'EDITOR', editor: {
type: 'datebox', options: {
panelHeight: 'auto',
editable: false,
buttons: buttons
}
下载后可阅读完整内容,剩余3页未读,立即下载
- 粉丝: 0
- 资源: 10
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展