Настоящий div выбран на странице обновления?

Question

Я пишу веб-приложение посещаемости, используя dev-Extrem dx-list (в весе UI). В этом посещении мы будем отображать все имена пользователей в dxlist. и для посещения нам просто нужно выбрать пользователя. который войдет в его имя в дБ. Мое требование - если мы обновим страницу, ее следует выбрать.

Мой пример кода здесь! (Я использую Dev-экстрим.)

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 элементов на странице перезагрузке.

Если да, то я предлагаю вам использовать следующий подход:

Добавить selected поля для каждого элемента (я имею в виду DB схему). Оно должно быть как:

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

Получить выбранные элементы перед списком рендеринга:

var selectedItems = load_from_your_server(); 

Init список с опцией selectedItems:

$("#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/, который иллюстрирует мою идею. Я использовал Array, а не реальный db.