動態加載選擇使用jquery雙列表框插件

我有一個Grails項目，我使用 [jquery dual listbox plugin]來填充box1（可用）的選項box2（授予）。動態加載選擇使用jquery雙列表框插件

我的問題是，在已經存在（更新）的記錄的情況下，已經選擇的選項不會顯示在框2中。所有選項都出現在框1中，就好像它們還沒有被選中一樣。可以做些什麼來從box1中刪除選定的選項（可用）並讓它們出現在box2（授予）中？

當使用授予/拒絕按鈕時，jquery雙列表插件正在將項目從box1移動到box2，反之亦然。

的Javascript在edit.gsp：

$(function() { 
    $.configureBoxes({ 
     transferMode: 'move', 
     useFilters: false, 
     useCounters: false, 
     box1View: 'available', 
     box2View: 'granted', 
     to1: 'toAvail', 
     to2: 'toGranted' 
    }); 
});

選擇在edit.gsp：

<table> 
     <tr> 
      <td> 
       Available<br/> 
       <g:select name="available" 
          id="available" 
          from="${availableList}" 
          value="${user?.granted}" 
          optionKey="id" 
          multiple="multiple" 
          style="height:200px;" 
       /> 
      </td> 
      <td> 
       <button id="toGranted" type="button" class="button_right">Grant</button> 
       <br/> 
       <button id="toAvail" type="button" class="button_left">Deny</button> 

      </td> 
      <td> 
       Granted<br/> 
       <g:select name='granted' 
          id="granted" 
          from="[]" 
          multiple="multiple" 
          style="height:200px;" /> 
      </td> 
     </tr> 
    </table>

爲了讓事情變得複雜一些，盒1（可選）可以從一個onChange事件來填充另一個選擇在edit.gsp中：

<g:select name="parent" id="parent" 
           from="${Parent.list()}" 
           optionKey="id" 
           noSelection="[null:'']" 
           value="${user?.parent}" 
           onchange="${remoteFunction(
            controller: 'user', 
            action: 'ajaxGetAvailable', 
            onSuccess: 'updateAvailable(data)', 
            params: '\'id=\' + this.value')}" 
        /> 

function updateAvailable(data) { 
    var $element = $('#available'); 
    var $granted = $('#granted'); 
    $element.empty(); 
    $granted.empty(); 
    $.each(data, function(i, item) { 
    $element.append($('<option>').val(data[i].id).text(data[i].name)) 
    }); 
}

上面的函數使用JSON對象，從控制器：

def ajaxGetAvailable = { 
     def parent = Parent.get(params.id) 
     render parent?.available as JSON 
    }

類上面提到的：

class Parent { 
    static mapWith = "mongo" 

    String entityId 
    String name 

    static hasMany = [ available: Entity ] 
} 

class Entity { 

    static mapWith = "mongo" 

    String entityId 
    String name 

    static belongsTo = [parent:Parent] 
}

來源

2013-08-16 Spark43502

該問題已通過更新可用和已授予選擇來解決。請注意，在「from」中使用Groovy從可用選項中刪除授予的選項。

<g:select name="available" 
      id="available" 
      from="${availableList - user?.granted}" 
      value="${user?.granted}" 
      optionKey="id" 
      multiple="multiple" 
      style="height:200px;" 
/> 

<g:select name='granted' 
      id="granted" 
      from="${user?.granted}" 
      multiple="multiple" 
      optionKey="id" 
      style="height:200px;" 
/>

來源

2013-08-27 19:30:18 Spark43502

您授予select有這個from="[]"。您需要更改from，以便它包含已保存到數據庫（或任何地方）的已授予項目的集合。

此外，在呈現視圖之前（在您的控制器中），您需要從availableList中篩選出授予的項目。

來源

2013-08-16 21:31:33 Gregg

動態加載選擇使用jquery雙列表框插件

回答

相關問題