1. 程式人生 > >Jquery編輯單元格-下拉框

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編輯單元-

var tdNode1 = $("td[field='selectItemName']");      //讓"選項"這一列的每個單元格擁有click事件   //注:索引從1開始   for(var i=1;i<data.rows.length+1;i++){    

SWT雙擊table單元編輯、變為

最近一年都是在做plugin開發,碰到的問題也很多,之前碰到個有關table可編輯的,似乎答案甚少,幾乎找不到,這裡就將自己的經驗分享一下。 首先是雙擊表格,使之變為可編輯框,修改之後恢復預設設定 程式碼如下: table.addMouseListener(new Mo

MFC List Control控制元件新增單元編輯單元列表項以適用於資料庫相關操作

void CNephoVisionDatabaseDlg::createEdit(NM_LISTVIEW *pEditCtrl, CEdit *createdit, int &Item, int &SubItem, bool &havecreat)//建立單元格編輯框函式

jQuery滑鼠懸停展示

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery實現懸停下拉選單</title> <style type="text/c

使用vue+element實現表格的新增、編輯(含)、刪除功能(Vue開發二)

幾天前,需要做一個需求:新增一個xml檔案時,新增數量不確定、屬性相同的xml標籤,想了想可以用表格做啊,屬性相同,使用統一的表頭,下面的屬性值只是進行增刪改不就行了,就類似於mysql給表裡填資料一樣。 可是目前似乎還沒有表格的直接增刪改一行的操作,那要怎麼實現呢?於是,通過上網以及自己的思考

pb編輯視窗控制中的內容自動篩選並必須選擇正確和欄位型別正確

dw 的 editchanged事件: ib_changed = true cb_update.enabled = true datawindowchild ldwc_dddw datawindowchild ldwc_dddw1 CHOOSE CASE dwo.nam

jquery autocomplete 自動填充的使用之自定義資料顯示

官方的介紹地址為 http://jqueryui.com/autocomplete/ 本文對於簡單的使用不做介紹,僅僅介紹自定義資料結構如何進行顯示,在官方的demo中也有(http://www.jqueryui.org.cn/demo/5663.html),程式碼如下: <

ooalv設定單元

在編輯ooalv的時候,有寫單元格的值是一些固定的值,比如借貸標 識S,H,此時可以設定單元格的屬性為下拉。實現步驟如下: 1.展示內表新增控制控制代碼 TYPES : BEGIN OF T_SHOW, SHKZG LIKE BSEG-SHKZG, "借貸標識 DD_HNDL TYP

jQuery實現當select內容變化時,input輸入內容隨之變化

今天實現了一個功能,當select下拉框中的內容發生變化時,input輸入框中的內容隨之發生變化,具體實現方法如下: //繫結change事件,當下拉框內容發生變化時啟動事件 $("#wlms")

jQuery外掛實現select左右選擇_交換內容(multiselect2side) 的一些網站 (有時間整理)

http://blog.csdn.net/mexican_jacky/article/details/51151495 http://blog.csdn.net/nihaoma71121/article/details/50971672 http://www.t

使用Ajax和Jquery配合資料庫實現的二級聯動

首先我們需要先建立好資料庫,將一些資料插入進去 需要兩張表: province:省份表 city :          城市表 如圖: 然後再在java中建立相關的實體類與之對應 再然後,我們就能開始做jdbc的操作了 public class ConnectionFa

jquery---如何獲取select當前選擇的文字

<select name="area" id="areaid"> <option value="">--請選擇--</option> <option valu

jquery multiselect如何實現多選並獲取多個選項的值

    今天做專案遇到了一個需要用多選框實現多選功能、並將多選框的值傳到後臺實現插入一張表的問題,最開始一直在想用複選框實現多選功能,後來發現做起來頁面不好看,最後在網上查資料,想找到一種方便使用的外掛,最後選擇了multiselect這個外掛。     首先簡單說下我要實

struts2中用jquery、ajax實現的級聯

–這是剛學會的一個,從action中傳出json型別資料的字串,然後通過ajax再把字串解析出json物件。下面是大致的步驟。 1、post.jsp頁面 在js中加入函式程式碼 <

poi建立excel檔案時,生成單元

最近在專案中使用poi建立excel檔案時,需要生成單元格下拉選。 下面是一個demo,註釋比較清楚,以此參考。 package poi; import java.io.FileOutputStream; import org.apache.poi.hssf.user

jquery和js 判斷選項選中值

變異 scrip select his () pre variant color span js <script> var selectId = document.getElementById("VariantType");//獲取ID

jqGrid 單元編輯 自定義選擇 動態資料來源 通用實現

jqGrid編輯型別可分為:單元格編輯(Cell editing)、行內編輯(Inline editing)和表單編輯(Form editing),本文討論單元格編輯模式下,下拉選擇框的通用實現。jqGrid自帶下拉選擇框編輯型別,只要設定edittype='select’並設定editop

Excel VBA 根據單元的值來改變另一個單元的值

在很多的報表開發中,需要用到VBA去設定Excel的一些規則。  以下是一個根據下拉框單元格的值來給特定單元格進行賦值的程式碼: Private Sub Worksheet_SelectionChange(ByVal Target As Range) On Error Resume

java生成Excel時,為某列(單元)建立

在做專案時,有時需要批量匯入的功能,通過Excel來進行批量匯入.... 遇到個小問題,希望在Java生成Excel中,有個模板,對於某些單元格,如性別等列,可以通過下拉框的方式來進行為使用者提示。 這樣既讓使用者覺得方便了,而且Excel會自動進行檢查,一旦不是下拉框中的

jQuery 實現可編輯

HTML的下拉框可以讓使用者方便地選擇專案,但是如果要允許使用者隨意新增選項呢?有朋友建議我使用一個按鈕,新增自定義專案。不過我還是傾向於在下拉框裡做手腳。 在select中新增一項,其它。value=-1 select中class中增加 editable 然後js程式碼如