Javascript 如何在结果表中仅显示选定的记录_Javascript_Jquery_Html_Mvvm_Kendo Ui

Javascript 如何在结果表中仅显示选定的记录

javascript jquery html mvvm kendo-ui

Javascript 如何在结果表中仅显示选定的记录,javascript,jquery,html,mvvm,kendo-ui,Javascript,Jquery,Html,Mvvm,Kendo Ui,有两个表使用相同的源。这些表使用剑道模板的源绑定。目前，这两个表的来源都是employees。这两个表显示的数据相同现在，我们需要修改它，以便在结果表中仅显示选中的复选框记录。此外，当用户单击结果表上的“删除”按钮时，该复选框应在节表中取消选中我们需要做什么修改才能使它在MVVM中工作头 MVVM测试删除 $（文档）.ready（函数（）{ bind（$（“body”），viewModel； }); MVVM <script type="text/javascript

有两个表使用相同的源。这些表使用剑道模板的源绑定。目前，这两个表的来源都是

employees

。这两个表显示的数据相同

现在，我们需要修改它，以便在结果表中仅显示选中的复选框记录。此外，当用户单击结果表上的“删除”按钮时，该复选框应在节表中取消选中

我们需要做什么修改才能使它在

MVVM

中工作

头


MVVM测试
删除
$（文档）.ready（函数（）{
bind（$（“body”），viewModel；
});

MVVM

    <script type="text/javascript">
        var viewModel = kendo.observable({

            // model definition
            employees: [
        { name: "Lijo", age: "28" },
        { name: "Binu", age: "33" },
        { name: "Kiran", age: "29" }
        ],

            personName: "",
            personAge: "",

            //Note: Business functions  does not access any DOM elements using jquery.
            //They are referring only the objects in the view model.

            //business functions  (uses "this" keyword - e.g. this.get("employees"))
            addEmployee: function () {
                this.get("employees").push({
                    name: this.get("personName"),
                    age: this.get("personAge")
                });

                this.set("personName", "");
                this.set("personAge", "");
            },

            deleteEmployee: function (e) {

                //person object is created using "e"
                var person = e.data;

                var employees = this.get("employees");
                var index = employees.indexOf(person);
                employees.splice(index, 1);
            }

        });

    </script>


var viewModel=kendo.observable({
//模型定义
雇员：[
{姓名：“Lijo”，年龄：“28”}，
{姓名：“比努”，年龄：“33”}，
{姓名：“基兰”，年龄：“29”}
],
人名：“，
人物：“，
//注意：业务函数不使用jquery访问任何DOM元素。
//它们仅引用视图模型中的对象。
//业务功能（使用“this”关键字-例如this.get（“员工”））
addEmployee:函数（）{
这个。获取（“员工”）。推({
name:this.get（“personName”），
年龄：这个。获取（“人物”）
});
this.set（“personName”，“personName”）；
此.set（“人物”、“人物”）；
},
删除雇员：职能（e）{
//person对象是使用“e”创建的
var person=e.data；
var employees=此.get（“员工”）；
var指数=员工指数（个人）；
员工。拼接（索引，1）；
}
});

身体

<body>


    <table id="selectionTable">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </thead>
        <tbody data-template="selection-table-template" data-bind="source: employees">
        </tbody>
    </table>

  <br />
  <hr />

    <table id="resultTable">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
            </tr>
        </thead>
        <!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. -->
        <tbody data-template="row-template" data-bind="source: employees">
        </tbody>
    </table>


</body>


名称
年龄



名称
年龄

参考资料

使用字典存储[employee，boolean]以存储employee和复选框状态，并将字典绑定到视图

先检查第一件事

如果在删除对象时将其从viewModel中删除，则该对象也将从源表中删除。如果希望它是您描述的方式，则需要两个数组来处理此问题。但是基于你问题的第一部分，我想我会发布一个解决方案

HTML JSFIDLE

总结在“行模板”中使用

data bind=“visible:isChecked”

，在底部表格中仅显示选定的记录

将复选框的模板设置为

    <input type="checkbox" name="selection" data-bind="checked: isChecked"/>

如果我在下表中单击“删除”按钮，则只有在上表中取消选中。但现在，这一记录正在从榜首消失。我们如何修复它？删除您的拼接语句。抱歉，而不是employee.isChecked=false；它应该是employee.set（'isChecked'，false）；谢谢你，我删除了评论，并用你想要的和小提琴更新了答案。祝你好运它出现在我的屏幕上，也出现在小提琴上。嗯，不确定，伙计。。不过我得回去工作了。参考：参考：

<script id="row-template" type="text/x-kendo-template">
    <tr data-bind="visible: isChecked">
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
        <td>
            <button type="button" data-bind="click: deleteEmployee">Delete</button>
        </td>
    </tr>
</script>

<script id="selection-table-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
        <td>
            <input type="checkbox" name="selection" data-bind="checked: isChecked"/>
        </td>
    </tr>
</script>

<table id="selectionTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>

<br />
<hr />

<table id="resultTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody data-template="row-template" data-bind="source: employees"/>
</table>

var viewModel = kendo.observable({
    employees: [
        { name: "Lijo", age: "28", isChecked: true },
        { name: "Binu", age: "33", isChecked: true },
        { name: "Kiran", age: "29", isChecked: true }
    ],

    personName: "",
    personAge: "",

    addEmployee: function () {
        this.get("employees").push({
            name: this.get("personName"),
            age: this.get("personAge")
        });

        this.set("personName", "");
        this.set("personAge", "");
    },

    deleteEmployee: function (e) {
        var person = e.data;
        var employees = this.get("employees");
        var index = employees.indexOf(person);
        var employee = employees[index];

        //set
        employee.set('isChecked', false);
    }
});


$(document).ready(function () {
    kendo.bind($("body"), viewModel);
});

    <input type="checkbox" name="selection" data-bind="checked: isChecked"/>

    employee.set('isChecked', false);