Question

我需要一些建议来设计一个自定义控件，它使用两个网格和中间的“添加和删除”按钮。

“添加”按钮从左侧获取所选项目并将其添加到右侧，然后将其从左侧移除。

“删除”按钮反之亦然。

要获得流畅的体验，我了解Javascript可能必须参与其中。

目前我正在创建一个继承CompositeControl的控件，它有两个网格和两个源。我可以使用UpdatePanel，所以我不必在添加/删除时做完整的回复。

有关最佳方法的任何建议吗？

Answer 1

我使用Kendo做了这个样本。我写了一些部分。我希望它会有所帮助我在示例中添加并删除了一些指向监督的路径：你需要一个像这样的主要动作：

        public ActionResult AddPathToSupervisor()
    {
                return View();
    }

我的示例有点完整，因为在视图中首先选择一个主管，然后为他添加一些路径。在视图中，您需要2个网格和2个按钮用于添加/删除像这样：

<div class="row">
<div class="col large">
    @(Html.Kendo().ComboBox()
    .Name("supervisor")
    .BindTo(SupervisorsSelectList)//var DocumetTypesSelectList = ViewBag.DocumetTypesSelectList as List<SelectListItem> ?? new List<SelectListItem>();
    .Events(e => e.Change("changeSupervisor"))

    )
</div>
</div>

<div class="row">
    <div class="col medium">
        <p>New Paths</p>
    </div>
    <div class="col medium">
        <p></p>
    </div>
    <div class="col medium">
        <p>Supervisor Paths</p>
    </div>

</div>

<div class="row">
    <div class="col medium">
        @(Html.Kendo().Grid<Distribution.Models.Path>()
            .Name("newPathsGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.PathId).Visible(false);
                columns.Bound(p => p.Title).Title(PathResource.Paths);
            })
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Filterable(filterable => filterable.Extra(false))
                //.HtmlAttributes(new { style = "height:480px;" })
            .Resizable(resize => resize.Columns(true))
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                //.PageSize(15)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PathId);
                    model.Field(p => p.PathId).DefaultValue(new Guid());
                })
                .Read(read => read.Action("FillNewSupervisorPathsGrid", "Paths"))
            )
        )
    </div>


<div class="col medium">
        <input type="button" id="addPathToSupervisor" value=">>Add>>" />
        <input type="button" id="removePathFromSupervisor" value="<<Remove<<" />
    </div>


<div class="col medium k-rtl">
        @(Html.Kendo().Grid<Distribution.Models.Path>()
            .Name("supervisorPathGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.PathId).Visible(false);
                columns.Bound(p => p.Title).Title(PathResource.Paths);
            })

        //.Pageable()
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Filterable(filterable => filterable.Extra(false))
                //.HtmlAttributes(new { style = "height:480px;" })
            .Resizable(resize => resize.Columns(true))
            .Selectable(s => s.Mode(GridSelectionMode.Multiple))
            .DataSource(dataSource => dataSource
                .Ajax()
                //.PageSize(15)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.PathId);
                    model.Field(p => p.PathId).DefaultValue(new Guid());
                })
                .Read(read => read.Action("FillSupervisorPathsGrid", "Paths", new { id = ViewBag.SupervisorId }))
            )
        )
    </div>
</div>

这个javascript代码是选择Supervisor的ID：

<script type="text/javascript">
function changeSupervisor(e) {
    var id = this.value();
    var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
    supervisorPathGrid.dataSource.read({ id: id });
}

这是添加和删除路径的javascript代码：

<script type="text/javascript">
var supervisorPathGrid = $("#supervisorPathGrid").data("kendoGrid");
var newPathsGrid = $("#newPathsGrid").data("kendoGrid");
var selectedItem = $("#supervisor").data("kendoComboBox");

$(document).on('click', '#addPathToSupervisor', function (e) {
    e.preventDefault();
    var supervisorId = selectedItem.value();
    if (hasManyRowSelected(newPathsGrid)) {
        var values = [];
        values.push({
            name: "supervisorId",
            value: supervisorId
        });
        newPathsGrid.select().each(function () {
            values.push({
                name: "ids",
                value: newPathsGrid.dataItem(this).PathId
            });
        });
        $.ajax({
            url: '@Url.Action("AddPathToSupervisor")',
            type: 'POST',
            datatype: "json",
            traditional: true,
            data: values,
            success: function () {
                newPathsGrid.select().each(function () {
                    var $this = $(this);
                    var data = newPathsGrid.dataItem($this);
                    supervisorPathGrid.dataSource.insert(0, data);
                });
                newPathsGrid.select().each(function () {
                    var $this = $(this);
                    var data = newPathsGrid.dataItem($this);
                    newPathsGrid.removeRow($this);
                });
            },
            beforeSend: function () {
                $('#addPathToSupervisor').attr("disabled", true);
                $('#addPathToSupervisor').addClass("ajax-load");
            },
            error: function (event, request, settings) {
                ajax_exception(event);
            },
            complete: function () {
                $('#addPathToSupervisor').attr("disabled", false);
                $('#addPathToSupervisor').removeClass("ajax-load");
                grid.dataSource.read();
            },
            timeout: 50000
        });
    }
});
$(document).on('click', '#removePathFromSupervisor', function (e) {
    e.preventDefault();
    var supervisorId = selectedItem.value();
    if (hasManyRowSelected(supervisorPathGrid)) {
        var values = [];
        supervisorPathGrid.select().each(function () {
            values.push({
                name: "ids",
                value: supervisorPathGrid.dataItem(this).PathId
            });
        });
        $.ajax({
            url: '@Url.Action("RemovePathFromSupervisor")',
            type: 'POST',
            datatype: "json",
            traditional: true,
            data: values,
            success: function () {
                supervisorPathGrid.select().each(function () {
                    var $this = $(this);
                    var data = supervisorPathGrid.dataItem($this);
                    newPathsGrid.dataSource.insert(0, data);
                });
                supervisorPathGrid.select().each(function () {
                    var $this = $(this);
                    var data = supervisorPathGrid.dataItem($this);
                    supervisorPathGrid.removeRow($this);
                });
            },
            beforeSend: function () {
                $('#removePathFromSupervisor').attr("disabled", true);
                $('#removePathFromSupervisor').addClass("ajax-load");
            },
            error: function (event, request, settings) {
                ajax_exception(event);
            },
            complete: function () {
                $('#removePathFromSupervisor').attr("disabled", false);
                $('#removePathFromSupervisor').removeClass("ajax-load");
                grid.dataSource.read();
            },
            timeout: 50000
        });
    }
});

现在你需要2个Post方法来添加和删除这样的路径：

    [HttpPost]
    public ActionResult AddPathToSupervisor(string[] ids, string supervisorId)
    {
        try
        {
            PathsBll.AddPathsToSupervisor(ids, supervisorId);
        }
        catch (Exception ex)
        {
            throw ex;
        }
        return Json(ModelState.ToDataSourceResult());
    }

    [HttpPost]
    public ActionResult RemovePathFromSupervisor(string[] ids)
    {
        try
        {
            PathsBll.RemovePathsFromSupervisor(ids);
        }

        catch (Exception ex)
        {
            throw ex;
        }
        return Json(ModelState.ToDataSourceResult());
    }

您可以在其中编写linq以通过ID添加或删除路径。如果你熟悉kendo，你知道你有2种方法来填充每个网格。如果您需要更多信息添加评论。好舔

ASP.NET自定义控件，两个网格..需要一些建议

1 个答案: