`
JavaSky66
  • 浏览: 38695 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery编辑单元格-下拉框

 
阅读更多

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");
   }

分享到:
评论

相关推荐

    jquery.jqGrid-4.3.0+jquery-ui-1.8.16.custom所有包

    同时,jqGrid提供了多种内置的编辑器,如文本框、下拉框、日期选择器等,用于处理单元格数据的编辑。 接下来,我们转向jQuery UI 1.8.16,这是jQuery的一个界面库,包含了一整套可定制的用户界面元素,如对话框、...

    jquery-tabledit-1.2.3.zip

    jQuery Tabledit是一款基于jQuery的开源插件,它允许用户在表格的任何单元格上进行编辑,无需跳转到新的页面或弹出窗口。该插件支持多种数据类型,包括文本、日期、选择列表等,并且可以实现数据的保存、删除以及...

    JQuery可编辑表格、横向纵向菜单、标签页、级联下拉框、窗口

    本主题将深入探讨jQuery在创建可编辑表格、实现横向和纵向菜单、构建标签页、设计级联下拉框以及窗口管理方面的应用。 首先,让我们谈谈jQuery可编辑表格。在网页上展示数据时,有时需要用户能够直接在表格中进行...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    这个插件允许用户在表格的单元格内直接进行编辑,包括选择下拉框中的值。 `bootstrap-editable`是Twitter Bootstrap的一个编辑器插件,它提供了一种方便的方式来实现元素的即时编辑。它支持多种类型的输入,如文本...

    jquery-easyui

    开发者可以通过配置列的`editor`属性来指定编辑类型,如文本框、下拉框等。 3. **datagrid_data.json**:这个文件很可能是用于填充DataGrid的数据源,它以JSON格式存储了表格所需的结构化数据。在`jQuery EasyUI`中...

    jquery.jqGrid-4.4.3

    在 `css` 目录中,`ui.jqgrid.css` 是 jqGrid 的默认样式表,定义了网格的基本样式,包括单元格的布局、颜色、边框等。通过自定义这个文件,可以轻松地调整 jqGrid 的外观以适应你的项目需求。 五、主要功能详解 1....

    jquery-datatables-editable:自动从code.google.compjquery-datatables-editable导出

    1. 插件集成:`jquery-datatables-editable`通过简单的配置,将编辑功能无缝地集成到DataTables中,允许用户直接在表格单元格上进行增删改查操作。 2. 动态更新:当用户编辑表格数据后,插件会实时更新表格内容,并...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    jquery easy ui edatagrid 动态编辑表格 例子

    在本文中,我们将深入探讨jQuery Easy UI中的`edatagrid`组件,以及如何实现动态编辑表格,特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具,它扩展了基本的`datagrid`功能,提供了更丰富的...

    jQuery+easyui中的combobox实现下拉框特效

    这里的配置与第一种方法类似,只是嵌套在了`editor`对象中,用于表格单元格的编辑。 第三种方法与第二种相似,只是将配置方式稍作调整,但实现效果相同: ```html ,options:{data:[{'value':'1','text':'java'},{'...

    spreadjs_添加下拉框选则表单功能-demo.zip

    SpreadJS 是一款强大的JavaScript电子表格库,由GrapeCity公司开发,它提供了丰富的功能,包括数据编辑、格式化、计算以及复杂的图表创建等,使得在Web应用中实现类似Excel的功能成为可能。本示例“spreadjs_添加...

    jquery几个经典例子

    - **可编辑表格**:jQuery允许动态改变表格单元格(td)的内容,实现用户交互式的编辑功能。例如,可以使用`.click()`事件监听表格单元格的点击,然后使用`.html()`或`.text()`方法更改内容。 3. **JQuery实战第三...

    表格嵌套下拉框

    在实际应用中,实现"表格嵌套下拉框"可以使用各种前端框架和技术,例如JavaScript库如jQuery,或者现代的前端框架如React、Vue或Angular。这些框架提供了丰富的API和组件,能够轻松创建动态的下拉菜单和交互式表格。...

    jqgrid jquery 表格插件

    4. **编辑与添加**:支持单元格、行或表单模式下的数据编辑,用户可以方便地添加、更新和删除数据。 5. **导入导出**:支持从CSV、Excel等格式导入数据,也能将表格数据导出为这些格式。 6. **列操作**:列宽可...

    jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

    例如“报告交付方式”包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下 报告交付方式: &lt;select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:...

    jQuery实战(图书+实例)

    这涉及到对表格单元格的选择、内容获取与修改,以及事件监听,为用户提供交互式的数据编辑体验。 **第三部分:动态标签页** “JQuery实战第四讲:标签页效果”将教会你如何用jQuery创建动态切换的标签页组件。这...

    JS表格组件BootstrapTable行内编辑解决方案x-editable

    通过x-editable,我们可以轻松地将表格中的单元格转变为可编辑的输入框,用户可以直接在表格内进行编辑,无需跳转至新页面或者打开模态框。 首先,我们需要在项目中引入x-editable的相关文件,包括CSS样式表、...

    jQuery-tableInlineEdit:用于内联表编辑的 jQuery 插件

    jQuery-tableInlineEdit 提供了一系列配置选项来定制你的内联编辑行为,如编辑模式(文本框、下拉框等)、保存按钮文字、验证规则等。例如: ```javascript $('#myTable').tableInlineEdit({ editMode: 'text', //...

    jQuery视频教程及详细说明

    我们将学习如何使用jQuery实现表格单元格的编辑功能,使用户可以直接在网页上进行数据的增删改查,提升用户体验。 ### 第三讲:横向纵向菜单 在这一部分,我们将学习如何使用jQuery创建响应式的导航菜单,包括横向...

    bootstrap table单元格新增行并编辑

    这个框架使得在网页上创建可编辑的表格变得简单,允许用户直接在表格单元格内进行新增和编辑操作。以下是一个关于如何实现 Bootstrap Table 单元格新增行并编辑的详细解释: 首先,确保在你的 HTML 文件中引入了...

Global site tag (gtag.js) - Google Analytics