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项目。

如果是这样，我建议您使用下一种方法：

为每个项目添加selected字段（我的意思是数据库架构）。应该是这样的：

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

在列表渲染之前获取所选项目：

var selectedItems = load_from_your_server();

使用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/来说明我的想法。我使用的是数组，而不是真正的数据库。

在页面刷新时选择当前div？

1 个答案: