1

私のasp.net MVC 4アプリケーションには、2つの剣道UIグリッドを持つビューがあります。そのうちの 1 つには、製品とその属性のリストが含まれています。もう一方にはまったく同じ列が必要ですが、空です。

最初のグリッドで行を選択すると、最初のグリッドから削除され、2 番目のグリッドに追加されます。また、2 番目の行から行を削除して、最初の行に追加できるようにしたいと考えています。それを達成する方法がわかりません。ここに私の質問に対する答えがありますが、Kendo UI asp.net MVC ラッパーを使用してこれを実装できるようにしたいと考えています。

Kendo UI のコントロールによるデータのコピー

次のような ViewModel があります。

public class SelectProductsViewModel
{
    public IEnumerable<Product> Products { get; set; }
    public IEnumerable<Product> SelectedProducts { get; set; }
}

私のコントローラーアクションは次のようになります。

public ActionResult SelectProducts()
{
    var viewModel = new SelectProductViewModel
    {
        Products = GetProducts(), // Get Products form the database
        SelectedProducts = new List<Product>()
    }

    return View(viewModel);
}

そして、これが私のビューにあるものです：

@(Html.Kendo().Grid(Model.Products)
    .Name("productsgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Color);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.Price);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetProducts", "Product"))
        .Model(model =>
        {
            model.Id("ProductID");
        })
    )
)

@(Html.Kendo().Grid(Model.SelecteProducts)
    .Name("selectedproductsgrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Color);
        columns.Bound(p => p.Size);
        columns.Bound(p => p.Price);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => new DataSource())
)
4

3 に答える 3

1 
var userListGrid = $("#grid1").data("kendoGrid");
var selectedUserListGrid = $("#grid2").data("kendoGrid");

//Clear data.
$("#grid2").data('kendoGrid').dataSource.data([]);

for (var i = 0; i < userListGrid._data.length; i++) {

    var dataitem = userListGrid._data[i];
    //Some condition before add [IsChecked is a model property]
    if (dataitem.IsChecked == true) {
        selectedUserListGrid.dataSource.add(dataitem);
    }
}
于 2014-02-26T01:43:19.500 に答える
0

selectedproductsgrid に製品を追加するための 2 つのボタンと、そこから項目を削除するための 2 つのボタンを追加して、AddProduct、RemoveProduct という名前を付け、グリッドで複数選択を有効にしてから、次の JavaScript コードを追加します。

function moveTo(from, to) {
var selecteddataset = to.dataSource._data;
var selected = $.map(from.select(), function (item) {
    var curuid = $(item).data("uid");
    var item = from.dataSource.getByUid(curuid);
    var isFound = false;
    for (var i = 0; i < selecteddataset.length; i++) {
        if (selecteddataset[i].uid == curuid) {
            isFound = true;
            break;
        }
    }
    if (isFound == false) {
        to.dataSource.add(item);
        //To add the selected one to SelectedProducts list in server code.
        var url = '@Url.Action("AddSelectedProduct", "Home")';
        $.post(url, { ProductName: item.ProductName, Color: item.Color, Size: item.Size }, function (result) {
        });
    }
});}

$("#AddProduct").click(function (e) {
    var productsList = $("#productsgrid").data("kendoGrid");
    var productsSelectedList = $("#selectedproductsgrid").data("kendoGrid");
    moveTo(productsList , productsSelectedList );
    e.preventDefault();
});

$("#RemoveProduct").click(function (e) {
    var productsSelectedList = $("#selectedproductsgrid").data("kendoGrid");
    var selected = $.map(productsSelectedList .select(), function (item) {
        var curuid = $(item).data("uid");
        var item = productsSelectedList.dataSource.getByUid(curuid);
        productsSelectedList .dataSource.remove(item);
        //To remove the selected from SelectedProducts datasource in server code
        var url = '@Url.Action("RemoveSelectedProduct", "Home")';
        $.post(url, { ProductName: item.ProductName }, function (result) {
        });

    });

    e.preventDefault();
});

アクション機能:

public ActionResult AddSelectedProduct(string ProductName, string Color, string Size)
    {
        //Some functions to add to SelectedProducts list.
        return Content("");
    }

public ActionResult RemoveSelectedProduct(string ProductName)
    {
        //Search by product name in SelectedProducts and remove it.
        return Content("");
    }

そして、var curuid = $(item).data("uid");選択されたすべての行のIDを取得します

于 2013-09-30T06:37:30.080 に答える