グリッド表示を2回

私はこれを使用しようとしていますjquery dual select plugin .I htmlページをカスタマイズし、ドロップダウンを追加してビューを選択しました。選択したビューに基づいて、グリッドにデータが表示されます。私が見ている問題は、私がビューを切り替えるたびにグリッドが複数回表示されていることです。グリッド表示を2回

私たちはビューを切り替えたときに一度だけ表示することを制限したり、動的にグリッドに新しいアイテムを追加するためのプロセスを教えてください。あなたのコードで

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery DualSelectList Example</title> 
    <link rel="stylesheet" type="text/css" 
    href="bala.DualSelectList/css/bala.DualSelectList.css"> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" 
    rel="stylesheet" type="text/css"> 
    <script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script type="text/javascript" src="bala.DualSelectList/js/bala.DualSelectList.jquery.js"></script> 
    <script type="text/javascript"> 
     function scheduleA(event) {  
      if (this.options[this.selectedIndex].text == "All Contacts") { 
       BindAllContacts(); 
      } 
      if (this.options[this.selectedIndex].text == "Contacts") { 
       RetriveAppointmentContact(); 
      } 

     } 

     function RetriveAppointmentContact() { 

      var dsl = $('#dualSelectExample').DualSelectList({ 
       'candidateItems' : ['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05', 'Item 06', 'Item 07'], 
       'selectionItems' : ['Item 08', 'Item 09', 'Item 03'] 
      }); 

      $('#getSel').click(function(){ 
       var res = dsl.getSelection(); 
       var str = ''; 
       for (var n=0; n<res.length; ++n) str += res[n] + '\n'; 
       $('#selResult').val(str); 
      }); 

      $('#addSel').click(function(){ 
       var items = $('#addIterms').val().split('\n'); 
       var res = dsl.setCandidate(items); 
      }); 
      } 
    </script> 
    <style> 
     body { 
     background-color: #fafafa; 
     } 
     .container { 
     margin: 150px auto; 
     font-family: 'Roboto'; 
     max-width: 960px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <h1>jQuery DualSelectList Example</h1> 
     <label title="Please select a View" id="view">Please select a View: </label> 
     <select onchange="scheduleA.call(this, event)"> 
      <option value="select">Please select</option> 
      <option value="contacts">Contacts</option> 
      <option value="allcontacts">All Contacts</option> 
     </select> 
     <div id="dualSelectExample" style="padding: 10px; width: 400px; height: 300px; background-color: rgb(240, 240, 240);"></div> 
     <br> 
     <div style="margin-right: 5px; float: left;"> 
      <div id="addSel" style="padding: 5px; width: 150px; text-align: center; color: black; cursor: pointer; background-color: lightgray;">Add Items</div> 
      <div class="ui-widget"><input id="addIterms" style="padding: 5px; width: 150px; cursor: pointer;" type="text"></div> 
      <!--  <textarea id="addIterms" type="textarea"></textarea>--> 
     </div> 
     <div style="float: left;"> 
      <div id="getSel" style="padding: 5px; width: 150px; text-align: center; color: black; cursor: pointer; background-color: lightgray;">Get Selection</div> 
      <input id="selResult" type="text"> 
      <!--  <textarea id="selResult" type="textarea"></textarea>--> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     var dsl = $('#dualSelectExample').DualSelectList({ 
      'candidateItems': [], 
      'selectionItems': [] 
     }); 

    </script> 
</body>

出典

2017-11-08 Rvrr

、あなたは二回DualSelectListを初期化し、移入しています。一度スクリプトの頭の中で、そして再びスクリプトの中の体の中に。 $('#dualSelectExample').DualSelectList()に電話するたびに、DualSelectListの新しいインスタンスを#dualSelectExampleに添付します。

プラグインのドキュメントは、既存のDualSelectList（コード内の変数dslとして保存されている）の内容を設定する方法について説明しています。

dsl.setCandidate(['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05']); 
dsl.setSelection(['Item 06', 'Item 07', 'Item 08', 'Item 09', 'Item 10']);

だからあなたの関数RetriveAppointmentContact()に、あなたは上記を行う代わりに、リストの別のインスタンスを初期化する必要があります。

出典

2017-11-08 22:03:06

あなたの提案に従ってコードを変更しましたが、グリッドが表示されるのは1回だけですが、データが複製され、ビューを切り替えるときに同じグリッド内で拡大することがわかりました。 – Rvrr

答えて

関連する問題