var tdNode1 = $("td[field='selectItemName']");
//让"选项"这一列的每个单元格拥有click事件
//注:索引从1开始
for(var i=1;i<data.rows.length+1;i++){
$(tdNode1[i]).bind('click',tdClick);
}
//td点击事件
function tdClick(){
var td = $(this);
var trIndex = td.parent("tr").index();
//alert(trIndex);
//给参数赋值
DxZhFx.midCode = data.rows[trIndex]["midCode"];
DxZhFx.trendCode = data.rows[trIndex]["trendCode"];
DxZhFx.id = data.rows[trIndex]["id"];
var tdText = td.text();
//将td的内容清空
td.empty();
//创建select下拉框
var input = $("<select id='"+DxZhFx.trendCode+"'></select>");
//下拉框中的数据源加载
var aiStore = new Ext.data.Store({
proxy: new Ext.ux.data.DWRProxy({
method: dxDWRFacade.getSelectItem,
listeners:{
loadexection:function(proxy,o,response,e){
Ext.ux.MessageBox.info(e);
}
}
}),
reader: new Ext.data.JsonReader({
root:'root',
totalProperty:'totalProperty'
},[
{name:'selectItemCode',mapping:'selectItemCode'},
{name:'selectItemName',mapping:'selectItemName'}
])
});
//下拉框获得焦点事件
input.focus(function(){
});
//基本参数设置
Ext.apply(aiStore.baseParams, {
midCode:DxZhFx.midCode,
trendCode:DxZhFx.trendCode
});
aiStore.load();
aiStore.on('load',function(){
var pp = "";
for(var i=0;i<aiStore.data.length;i++){
var sat = aiStore.getAt(i);
pp += "<option value="+sat.data['selectItemCode']+">"+sat.data['selectItemName']+"</option>";
}
input = $("<select id='"+DxZhFx.trendCode+"'>"+pp+"</select>");
//将select下拉框放到td中
td.append(input);
//将td中原来的文本赋值到select下拉框中选中
$("select").find("option[text='"+tdText+"']").attr("selected", true);
$("select").focus();
//下拉框失去焦点事件
input.change(function(){
//获取下拉框中选中的值
var selectVal = $("select").val();
//保存改变的值
dxDWRFacade.updateDxzhfx(selectVal,DxZhFx.id);
//获取下拉框中选中的文本
var selectText = $("select").find("option:selected").text();
td.html("<u style='cursor:pointer;' >"+selectText+"</u>");
//让td重新拥有点击事件
td.click(tdClick);
});
input.blur(function(){
//获取下拉框中选中的值
var selectText = $("select").find("option:selected").text();
td.html("<u style='cursor:pointer;' >"+selectText+"</u>");
//让td重新拥有点击事件
td.click(tdClick);
});
});
$("select").select();
td.unbind("click");
}
分享到:
相关推荐
同时,jqGrid提供了多种内置的编辑器,如文本框、下拉框、日期选择器等,用于处理单元格数据的编辑。 接下来,我们转向jQuery UI 1.8.16,这是jQuery的一个界面库,包含了一整套可定制的用户界面元素,如对话框、...
jQuery Tabledit是一款基于jQuery的开源插件,它允许用户在表格的任何单元格上进行编辑,无需跳转到新的页面或弹出窗口。该插件支持多种数据类型,包括文本、日期、选择列表等,并且可以实现数据的保存、删除以及...
本主题将深入探讨jQuery在创建可编辑表格、实现横向和纵向菜单、构建标签页、设计级联下拉框以及窗口管理方面的应用。 首先,让我们谈谈jQuery可编辑表格。在网页上展示数据时,有时需要用户能够直接在表格中进行...
这个插件允许用户在表格的单元格内直接进行编辑,包括选择下拉框中的值。 `bootstrap-editable`是Twitter Bootstrap的一个编辑器插件,它提供了一种方便的方式来实现元素的即时编辑。它支持多种类型的输入,如文本...
开发者可以通过配置列的`editor`属性来指定编辑类型,如文本框、下拉框等。 3. **datagrid_data.json**:这个文件很可能是用于填充DataGrid的数据源,它以JSON格式存储了表格所需的结构化数据。在`jQuery EasyUI`中...
在 `css` 目录中,`ui.jqgrid.css` 是 jqGrid 的默认样式表,定义了网格的基本样式,包括单元格的布局、颜色、边框等。通过自定义这个文件,可以轻松地调整 jqGrid 的外观以适应你的项目需求。 五、主要功能详解 1....
1. 插件集成:`jquery-datatables-editable`通过简单的配置,将编辑功能无缝地集成到DataTables中,允许用户直接在表格单元格上进行增删改查操作。 2. 动态更新:当用户编辑表格数据后,插件会实时更新表格内容,并...
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
在本文中,我们将深入探讨jQuery Easy UI中的`edatagrid`组件,以及如何实现动态编辑表格,特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具,它扩展了基本的`datagrid`功能,提供了更丰富的...
这里的配置与第一种方法类似,只是嵌套在了`editor`对象中,用于表格单元格的编辑。 第三种方法与第二种相似,只是将配置方式稍作调整,但实现效果相同: ```html ,options:{data:[{'value':'1','text':'java'},{'...
SpreadJS 是一款强大的JavaScript电子表格库,由GrapeCity公司开发,它提供了丰富的功能,包括数据编辑、格式化、计算以及复杂的图表创建等,使得在Web应用中实现类似Excel的功能成为可能。本示例“spreadjs_添加...
- **可编辑表格**:jQuery允许动态改变表格单元格(td)的内容,实现用户交互式的编辑功能。例如,可以使用`.click()`事件监听表格单元格的点击,然后使用`.html()`或`.text()`方法更改内容。 3. **JQuery实战第三...
在实际应用中,实现"表格嵌套下拉框"可以使用各种前端框架和技术,例如JavaScript库如jQuery,或者现代的前端框架如React、Vue或Angular。这些框架提供了丰富的API和组件,能够轻松创建动态的下拉菜单和交互式表格。...
4. **编辑与添加**:支持单元格、行或表单模式下的数据编辑,用户可以方便地添加、更新和删除数据。 5. **导入导出**:支持从CSV、Excel等格式导入数据,也能将表格数据导出为这些格式。 6. **列操作**:列宽可...
例如“报告交付方式”包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下 报告交付方式: <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:...
这涉及到对表格单元格的选择、内容获取与修改,以及事件监听,为用户提供交互式的数据编辑体验。 **第三部分:动态标签页** “JQuery实战第四讲:标签页效果”将教会你如何用jQuery创建动态切换的标签页组件。这...
通过x-editable,我们可以轻松地将表格中的单元格转变为可编辑的输入框,用户可以直接在表格内进行编辑,无需跳转至新页面或者打开模态框。 首先,我们需要在项目中引入x-editable的相关文件,包括CSS样式表、...
jQuery-tableInlineEdit 提供了一系列配置选项来定制你的内联编辑行为,如编辑模式(文本框、下拉框等)、保存按钮文字、验证规则等。例如: ```javascript $('#myTable').tableInlineEdit({ editMode: 'text', //...
我们将学习如何使用jQuery实现表格单元格的编辑功能,使用户可以直接在网页上进行数据的增删改查,提升用户体验。 ### 第三讲:横向纵向菜单 在这一部分,我们将学习如何使用jQuery创建响应式的导航菜单,包括横向...
这个框架使得在网页上创建可编辑的表格变得简单,允许用户直接在表格单元格内进行新增和编辑操作。以下是一个关于如何实现 Bootstrap Table 单元格新增行并编辑的详细解释: 首先,确保在你的 HTML 文件中引入了...