1. 程式人生 > >easyui datagrid動態修改editor為combobox的options

easyui datagrid動態修改editor為combobox的options

最近有個需求就是當你開啟datagrid的編輯狀態時,要根據行資料的不同對應的combobox的下拉選項也不同。同時為了美觀,開啟編輯狀態的時候combobox為我預設選擇資料。我的實現思路是,原有的editor的data不動,重寫onBeginEdit方法,在裡面獲取到要修改的editor,判斷rowData的值,當需要修改時再進行操作。廢話不多說,具體程式碼貼上:

onBeginEdit:function(index, rowData){
            //統計方法下拉框
            var smEditor = $('#FoTable').datagrid('getEditor', {
                      index : index,  
                       field : 'statisticMethod'  
            });
            $(smEditor.target).combobox({
                onLoadSuccess: function () {
                     $(smEditor.target).combobox('setValue', rowData.statisticMethod);
                },
                onShowPanel: function(){   //下拉展開時動態修改options
                    //datatype處理統計方法
                    if(rowData.dataType == 'string' || rowData.dataType == 'date'){
                        var data = [];
                        data.push({'key':'','value':'請選擇'},
                                {'key':'count','value':'計數'},
                                {'key':'min','value':'最小'},
                                {'key':'max','value':'最大'},
                                {'key':'mode','value':'眾數'});
                        $(smEditor.target).combobox("loadData", data);
                    }
                    //設定值                            
                    $(smEditor.target).combobox('setValue', rowData.statisticMethod);                
                }
            });
            //分組排序下拉框
            var goEditor = $('#FoTable').datagrid('getEditor', {
                      index : index,  
                       field : 'groupOrder'  
            });
            $(goEditor.target).combobox({
                onLoadSuccess: function () {
                     $(goEditor.target).combobox('setValue', rowData.groupOrder);
                },
                onShowPanel: function(){   //下拉展開時動態修改options
                    //datatype處理統計方法
                    if(rowData.groupOrder == 0){
                        var data = [];
                        data.push({'key':'0','value':'無'},
                                {'key':'1','value':'升序'},
                                {'key':'-1','value':'降序'});
                        $(goEditor.target).combobox("loadData", data);
                    }
                    //設定值                            
                    $(goEditor.target).combobox('setValue', rowData.groupOrder);                    
                }
            });
        }



相關推薦

easyui datagrid動態修改editorcombobox的options

最近有個需求就是當你開啟datagrid的編輯狀態時,要根據行資料的不同對應的combobox的下拉選項也不同。同時為了美觀,開啟編輯狀態的時候combobox為我預設選擇資料。我的實現思路是,原有的editor的data不動,重寫onBeginEdit方法,在裡面獲取到要

easyui datagrid 動態加入、移除editor

params text invalid ava strong print ram type options 使用easyui 行編輯的時候完畢編輯的功能比較簡單,可是假設要依據一個框的值動態改變別的值或者編輯的時候禁用某個框的時候就比較麻煩了。 比方像

jQuery easyui dataGrid 動態改變排序欄位名,一般情況下,在使用的時候,我們會點選相應欄位進行排序,這裡以JAVA例,後端的實體類欄位有可能和資料庫的欄位不一致; 如:實體類中的

jQuery easyui dataGrid 動態改變排序欄位名,一般情況下,在使用的時候,我們會點選相應欄位進行排序,這裡以JAVA為例,後端的實體類欄位有可能和資料庫的欄位不一致; 如:實體類中的屬性為userName,前臺filed="userName"而資料庫的欄位

easyuidatagrid動態修改

easyui datagrid 定義列的方式通常是: [html] view plain copy print? $('#grid').datagrid({columns:[[        {field:'f1',title:'欄位1',width:160},        {field:'

Easyui datagrid 動態合併單元格實現

最近在頁面開發商遇到了一個新需求,要求在datagrid中實現同名單元格縱向合併效果,類似這樣 官方demo中用的是死資料,不符合實際要求。通過對檢視API,確定datagrid的合併單元格通過提供起始位置(index),合併長度(rowspan)以及合併欄位名(field)。於是

EasyUI Datagrid 動態合併單元格

/** * EasyUI DataGrid根據欄位動態合併單元格 * @param fldList 要合併table的id * @param fldList 要合併的列,用逗號分隔(例如:"name,department,office");

EasyUI動態修改或新增textbox等表單元件

在某個input標籤上新增 class="easyui-datebox" 它就能自動變成日曆,這其實是EasyUI掃描的結果,在網頁載入完成後,相當於在$(document).ready()事件中,對整個網頁進行了一次掃描,發現某個input標籤含有cl

jquery easyui dataGrid動態改變排序欄位名

jquery easyui dataGrid 動態改變排序欄位名,一般情況下,在使用的時候,我們會點選相應欄位進行排序, 這裡以JAVA為例,後端的實體類欄位有可能和資料庫的欄位不一致; 如:實體類中的屬性為userName,前臺filed="userName"而資料庫的欄

easyui datagrid動態繫結列名和資料

ashx檔案內容 public void ProcessRequest(HttpContext context) {//示例用,各位可以根據自己需求寫 var id = context.Request["id"]; if (id

easyui datagrid單獨修改某列的值

                        此時心中毫無波瀾,只覺得好餓 廢話不多說,先看效果圖: 程式碼: <th field="departmentId" width="150px" sortable="true" editor="{type:'

easyui datagrid動態

在網上找了許多方法,也參考了許多大佬 感謝他們的成功,綜合來看如下 jsp 沒啥好說的,就一個table <table id="dg"></table> js 主要就是columns是從後臺傳過來的,因為是後臺

jquery easyui datagrid 動態隱藏列

datagrid列表控制元件在需要動態顯示、隱藏列時,若使用hideColumn會出錯顯示錯位的問題, 可能過兩種方式來解決此問題: 1.設定hidden屬性 2.重寫列頭 示例datagrid $('#magazineGrid').datagrid({ he

動態修改easyui-datagrid

csharp eas blog 動態修改 field grid datagrid htm 查詢 <table id="DataList" title="查詢結果" style="width:99%;padding:10px;"></table>

Easyui Datagrid 的Combobox 如何動態修改下拉選項,以及值的轉換

options 解釋 logs sel onclick med rsize rip 原因 我是先將下拉選項的值通過datagrid的url查出來了,在每一行的row中 //項目結果選項卡的列表 $(‘#project_table‘).datagrid({

關於動態修改easyui datagrid行樣式,不同樣式覆蓋優先順序問題(class)

easyui->datagrid->rowStyler 釋義:直接return class實際在html中是疊加class,並不會移除已有的自定義class,這會導致class的優先順序是根據在css檔案中的先後來判斷優先順序,達不到新的覆蓋舊的的效果,故此處先移除自定義class,再載入新cl

動態控制jQuery easyui datagrid工具欄顯示隱藏

第一條 button 一個 按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e

EasyUI datagrid 選擇單元格 出現文字框 修改

資料初始化 public JsonResult RateList(string dispatch_number, string target_currency) { var product = new[] {

EasyUI dataGrid 修改單元格值

$(function(){ // 單元格單擊事件 $("#dataGrid").datagrid({                   onClickCell: function (rowIndex, f

動態修改EasyUI accordion選中面板的標題(title)

   首先,我們應該知道,EasyUI的accordion是繼承panel元件的所有屬性方法的,那好,這時候我們就可以使用panel為我們提供的方法setTitle來動態修改accordion的標題了。 具體實現程式碼如下所示: 方式一: //獲取accordi

datagrid動態載入資料分頁下載EasyUI外掛

這是完整的前臺程式碼 <!DOCTYPE html> <html> <head id="Head1">     <title>StencilControl</title>     <script src="/