ページの更新時に現在のdivが選択されていますか？

Question

dev-Extrem dx-list（UIの重さ）を使用して出欠Webアプリケーションを作成しています。この出席では、dxlistにすべてのユーザー名を表示します。出席のためにはユーザーを選択するだけです。それは彼の名前をdbに入れます。私の要件は、ページを更新する場合、現在の選択が必要です。

私のコード例はこちらです！ （dev-extremeを使用しています）

var listWidget = ""; 
function getUsers(){ 
    var date = $('#date').val(); 
    var dt = date.split("/"); 
    var dat = dt[2]+"-"+dt[0]+"-"+dt[1]; 
    //alert(dat); 
    var data = { 'action': 'getUsers', 'date': dat}; 
    $.post("php/users.php", data).success(function (resp) { 
     //alert(resp); 
     var users = $.parseJSON(resp); 
     var selectedItems = []; 

     var dataSource = new DevExpress.data.DataSource({ 
      store: users, 
      searchOperation: "contains", 
      searchExpr: "name", 
     }); 
     listWidget = $("#simpleList").dxList({ 
      dataSource: dataSource, 
      editEnabled: true, 
      height: 400, 
      allowItemDeleting: false, 
      itemDeleteMode: "toggle", 
      showSelectionControls: true, 
      selectionMode: "multiple", 
      itemTemplate: function(data, index) { 
       var result = $("<div>").addClass("product"); 

       $("<img>").attr("src", "images/"+data.id+".jpg").appendTo(result); 
       var content = $("<div class='content'>").appendTo(result); 
       $("<div class='findAtt' style='display:none;'>").text(data.attendaceId).appendTo(result); 
       $("<div class='findId'>").text(data.id).appendTo(content); 
       $("<div class='findName'>").text(data.name).appendTo(content); 
       $("<div class='findDep'>").text(data.department).appendTo(content); 
       $("<div class='findCode'>").text(data.userCode).appendTo(content); 
       /*var edit = $("<div class='findEdit'>").appendTo(result); 
       $("<a class='edit' onclick='edit()'>").text("Edit").appendTo(edit);*/ 
       var salary = $("<div class='salary'>").appendTo(result); 
       $("<div class='findSalary'>").text("Rs."+data.userSalary).appendTo(salary); 
       return result; 
      }, 
      onItemSwipe: function(data){ 
       var userId = data.itemData.id; 
       var userSalary = data.itemData.userSalary; 
       $('#simpleList').dxList('instance').repaint(); 
       edit(userId, userSalary); 
      }   
     }).dxList("instance"); 

     $("#textbox").dxTextBox({ 
      valueChangeEvent: "keyup", 
      placeholder: "Search", 
      onValueChanged: function(args) { 
       dataSource.searchValue(args.value); 
       dataSource.load(); 
      }, 
      mode: "search"    
     }); 

     $('.dx-item').click(function(){ 
      var att = $(this).find('.findId').text(); 
      var dep = $(this).find('.findDep').text(); 
      //console.log(this); 
      attendance(this, att, dep); 
      $(this).toggleClass('background'); 
      //$(this).find('.dx-checkbox-checked').toggleClass('dx-checkbox-checked'); 


     }); 
    }); 
} 
getUsers(); 

function attendance(bg, att, dep){ 
    if($(bg).hasClass('background')){ 
     var usersId = att; 

     var data = { 'action': 'absent', 
        'userId': usersId 
        }; 
     $.post("php/users.php", data).success(function (resp) { 
     }); 
    }else{ 
     var userId = att; 
     var data = { 'action': 'attendance', 
        'userId': userId, 
        'dep': dep 
        }; 
     $.post("php/users.php", data).success(function (resp) { 
      //alert(resp); 
     }); 
    } 
} 

function edit(userId, userSalary){ 
    $('#eSalary').val(userSalary); 
    $('#eId').val(userId); 
    $('#editModal').modal(); 
} 

$('#saveSalary').click(function(){ 
    var userId = $('#eId').val(); 
    var salary = $('#eSalary').val(); 
    var data = { 'action': 'changeSalary', 'userId': userId, 'salary': salary}; 
    $.post("php/users.php", data).success(function (resp) { 
     $('#editModal').modal('hide'); 
     alert(resp); 
     //location.reload(); 
     $('#simpleList').dxList('instance').reload(); 
    }); 
}); 

$('#depList').change(function(){ 
    var depId = $('#depList option:selected').val(); 
    var data = { 'action': 'getUserDep', 'depId': depId}; 
    $.post("php/users.php", data).success(function (resp) { 
     //alert(resp); 
     var users = $.parseJSON(resp); 
     var selectedItems = []; 

     var dataSource = new DevExpress.data.DataSource({ 
      store: users, 
      searchOperation: "contains", 
      searchExpr: "name" 
     }); 
     var listWidget = $("#simpleList").dxList({ 
      dataSource: dataSource, 
      editEnabled: true, 
      height: 400, 
      allowItemDeleting: false, 
      itemDeleteMode: "toggle", 
      showSelectionControls: true, 
      selectionMode: "multiple", 
      itemTemplate: function(data, index) { 
       var result = $("<div>").addClass("product"); 

       $("<img>").attr("src", "images/"+data.id+".jpg").appendTo(result); 
       var content = $("<div class='content'>").appendTo(result); 
       $("<div class='findId'>").text(data.id).appendTo(content); 
       $("<div class='findName'>").text(data.name).appendTo(content); 
       $("<div class='findDep'>").text(data.department).appendTo(content); 
       $("<div class='findCode'>").text(data.userCode).appendTo(content); 
       var salary = $("<div class='salary'>").appendTo(result); 
       $("<div class='findSalary'>").text("Rs."+data.userSalary).appendTo(salary); 
       return result; 
      }    
     }).dxList("instance"); 

     $("#textbox").dxTextBox({ 
      valueChangeEvent: "keyup", 
      placeholder: "Search", 
      onValueChanged: function(args) { 
       dataSource.searchValue(args.value); 
       dataSource.load(); 
      }, 
      mode: "search"    
     }); 

     $('.dx-item').click(function(){ 
      var att = $(this).find('.findId').text(); 
      var dep = $(this).find('.findDep').text(); 
      //alert(att); 
      attendance(this, att, dep); 
      $(this).toggleClass('background'); 
     }); 
    }); 
}); 

Answer 1

私が理解する限り、dxListアイテムの選択をページのリロードに保存します。

もしそうなら、私はあなたが次のアプローチを使用することをお勧め：

は（私はDBスキーマを意味する）各項目のselectedフィールドを追加します。リストのレンダリング前に、選択した項目を取得します

{ id: 1, text: "Bob", selected: true } 

：selectedItemsオプション付きリストのInit

var selectedItems = load_from_your_server(); 

：

$("#list").dxList({ 
    //... 
    selectedItems: selectedItems 
}); 

次へ]を、onSelectionChangedイベントハンドラを追加します。

それは次のようにする必要があります

$("#list").dxList({ 
    //... 
    selectedItems: selectedItems, 
    onSelectionChanged: function(e) { 
     var listInst = e.component; 
     e.addedItems.forEach(function(item) { 
      // update item that was selected 
      update_your_item_in_db(item.id, {selected: true}); 
     }); 
     e.removedItems.forEach(function(item) { 
      // update item that was unselected 
      update_your_item_in_db(item.id, {selected: false}); 
     }); 
    } 
}); 

私の考えを示す小さなサンプルhttp://jsfiddle.net/vvh70no2/5/を作成しました。私は、実際のデータベースではなく、配列を使用しました。