How to display only selected records in the result

There are two tables using the same source. These tables are using source binding of kendo templates. At present the source for both these tables are employees. Both these tables are displaying the same data.

Now, we need to modify it to show only check-box selected records in the result table. Also, when user clicks on the delete button on the result table, the check-box should be un-selected in the section table.

What modification do we need to do to make it work in MVVM?

enter image description here

Head

<head>
    <title>MVVM Test</title>
    <script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
    <script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script>

    <!----Kendo Templates-->
    <script id="row-template" type="text/x-kendo-template">
          <tr>
                <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" value="a">             
                </td>

          </tr>

    </script>

    <!--MVVM Wiring using Kendo Binding-->
    <script type="text/javascript">

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

    </script>

</head>

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>

Body

<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>

REFERENCES

标签： javascript jquery html5 mvvm kendo-ui

2条回答

祖国的老花朵

2楼-- · 2019-06-12 05:22

First things first.

If you remove the object from the viewModel when you delete it, it will be removed from your source table as well. You would need two arrays to handle this if you wanted it to be the way you describe. But based on the first part of your question, I thought I would post a solution.

HTML

<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>

JAVASCRIPT

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);
});

JSFiddle

Fiddle

Summary

Use data-bind="visible: isChecked" in "row-template" to show only selected records in the bottom table.

Make template for checkbox as

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

In the delete function, use following

    employee.set('isChecked', false);

0人赞添加讨论(0) 举报

Juvenile、少年°

3楼-- · 2019-06-12 05:29

Use a dictionary to store [employee, boolean] to store employee and the checkbox state, and bind the dictionary to the view

Check this

0人赞添加讨论(0) 举报