标签: inline-editing

我有一个包含任意列和行的表.这个事实是无关紧要的,但实际上,我想要做的就是开发一个函数,将一行(或多行)转换为包含表中数据的一系列文本输入(如果单元格中没有数据,则为空).

我找不到任何人明确这样做的例子,所以我想知道人们认为这是找到解决方案的最佳方法.

有一个使用jqgrid的getChangedCells方法来确定数据是否已更改的示例？

我在jqgrid的可下载演示中使用了getChangedCells,并且只能找到函数定义,而不是getChangedCells的示例用法.

我想要做的是保存用户点击另一行时所做的编辑.但是,如果行是脏的,我只想提交保存.

在此先感谢, - 国家

我有一些分为几个部分的数据,很像StackOverflow Careers的Resume功能(虽然它不是恢复数据),它可以通过jQuery Web应用程序进行编辑/创建.它有点层次化(作业可以有子作业等),所以根据我采用的CRUD方法,它意味着不同的工作量.我不介意花时间去做正确的事,但我不想花很多时间做一些不是最佳用户体验的想象.

是否对"编辑"这种分段的分层文本数据的不同风格进行了任何研究:

1. 在适当的位置编辑(例如,您单击一个表单元素,如作业标题,它变为可编辑,然后您单击"确定",它保存)

2. 编辑按钮,将您带到新屏幕(如当前的StackOverflow)

3. 弹出模态表单的编辑按钮

4. 所有字段都是开放和可编辑的,单个保存按钮(如StackOverflow Careers)

是否应该使用这些不同的表格来提供最佳的用户体验？

我需要使用可编辑的条目实现网格.实体字段之一是字符串列表.例如,它是一个订单列表,每个订单可能有几个跟踪号.所以我需要它来实现一个小部件,它将支持显示实体列表,添加和删除项目的能力.而且(最重要的是)它必须在Kendo网格中工作.

所以我构建了一个示例小部件......

(function (jQuery) {

var ui = kendo.ui;
var Widget = ui.Widget;

var TrackingNumbersList = Widget.extend({
    addEntryToList: function (event, value) {
        if (value == undefined) {
            var value = this.valueInput.val();
            if (value != null && value != "") {
                this.addEntryToList(event, value);
            }
        } else {
            this.domElement.find("div#valuesContainer").append($j("<div valueContainer></div>").html(value));
            this.valueInput.val('');
        }
    },
    clear: function () {
        this.domElement.find("div[valueContainer]").remove();
    },
    renderInterface: function () {
        var that = this;

        this.domElement.append("<div id='valuesContainer'></div>");
        this.valueInput = $j("<input id='txtValue' type='text' />");

        this.domElement.append(
        $j("<div></div>").append(this.valueInput)
        .append($j("<input type='button' value='Add' />").click($j.proxy(that.addEntryToList, that))) …

在"显示"页面中有一些用于就地编辑模型的选项,即无需在"编辑"页面中加载表单.例如,请参阅http://www.ruby-toolbox.com/categories/rails_in_place_editing.html.

有没有人在Rails 3中使用任何这些选项(或其他)的经验？任何指针或建议？

就我而言,我有一个相当长的形式,由可变数量的项目组成.从可用性的角度来看,在同一页面中编辑这些项目中的文本是很有意义的,而不需要为将每个用户发送到特定项目的编辑页面的每个项目的编辑按钮.

我想知道是否可以以及如何在<span>其他内联元素上启用CKEditor4内联/可信任编辑功能.这是我在官方文档中找不到的东西.

有了这个标记:

<span id="editable" contenteditable="true"></span>

并且标准配置(启用AutoInline)或此配置:

<script>
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline('editable'); // ID of the element to edit
</script>

报告The specified element mode is not supported on element: "span". 错误:报告<a>标记的错误相同.

我正在尝试使用angularjs找到内联编辑的最佳方法.就我而言,它是一种带有"编辑"按钮的数据网格.所以它在ng-repeat里面.

我所见过的人在同一行中同时拥有实际数据和编辑输入,编辑输入被隐藏并在点击编辑按钮时显示.

但这似乎不对.在我看来,这是一个无用的DOM.

所以我觉得做这样的事情会更好.你点击编辑按钮,这将有一个指令,这将1)隐藏<td>数据2)找到按钮的父亲,应该是<tr>,并注入模板3)保存删除那些编辑<td>和<td>再次显示数据.

所以我开始制作指令,在我有element.click()功能的内部

// found the parent
var parent = element.closest('tr');
// found all the data tds
var tds = parent.find('td');
// hidden them  
tds.hide();

现在这是问题,接下来我想做这样的事情

// append input with editing tds into parent
parent.append('<td><input type="text" ng-model="entry.name" /> {{entry.name}} </td>');

但是它会不会绑定甚至解析{{}}它会不会？我必须使用什么方法而不是jquery的追加？

关于指令的文件说明了这一点

template element - 声明指令的元素.仅对元素和子元素进行模板转换是安全的.

所以我不能在element.parent()上使用模板转换

如果我做了指令就行了<tr>,即使我做了,我会改变我的整体<tr>,这意味着我失去了原来的模板,我必须有另一个指令或某些东西,将它转换回原始状态..不是吗？

编辑

因为这个问题看起来很流行..首先,我最初担心每次ng重复迭代渲染额外的元素是没有根据的,因为1)你可以使用ng-if,这意味着在条件成立之前它根本不会被渲染2)你可以像我想的那样附加一个模板,然后只是使用$compile它会很好地工作,它绝对不会"昂贵",因为你只是为了一个元素.有许多方法可以解决这个问题,但是ng-if是最简单的,如果supermasher的方式不适合你,那就是.

我在我的网络应用程序中使用x-editable进行内联编辑.我想将其他参数传递给服务器,我想从触发元素的数据属性中读取.这是我的可编辑元素:

<a href="#" data-url="save_url" data-pk="271" data-type="text" data-value="Value" class="editable" data-param="XXX">Value</a>

我想传递data-param属性,但我不知道如何访问trigger元素.我尝试过$(this).data('param'),但我得到null ...我的完整可编辑代码:

$.fn.editable.defaults.mode = 'inline';
$('.editable').editable({
    params: { param: $(this).data('param') }
});

$('.editable').data('param')由于我有许多.editable元素,因此不会考虑呼叫.

谢谢

我目前正在探索Bootstrap 4.

在Bootstrap 3中,我使用x-editable实现了内联编辑.

但是对于Bootstrap 4,我找不到如何实现内联编辑.

有什么建议？

 public class UserDetailsModel
    {
        public int ID { get; set; }
        public string LoginID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string IsDeleted { get; set; }
        public DateTime CreatedOn { get; set; }
    }

控制器:

public ActionResult Index()
        {
           object  model = obj.getUserList();
            return View(model);
        }

        public ActionResult Delete(int id)
        {
            BAL_obj.deleteUser(id);
            object model = obj.getUserList();
            return View("Index",model);
        }

Index.cshtml:

@model IEnumerable<WebGrid1App.Models.UserDetailsModel>

@{
     WebGrid grid = new …