easyui 编辑器(Jquery-EasyUi 数据网格内容编辑方法是什么？)

一、Jquery-EasyUi 数据网格内容编辑方法是什么？

Jquery-EasyUi 数据网格（datagrid）是一个强大的数据表格组件，它提供了丰富的功能，包括分页、排序、过滤、多选等等。在 datagrid 中，如果需要编辑某个单元格的内容，可以通过以下步骤实现：

设置 datagrid 的编辑功能

在 datagrid 的初始化参数中，需要设置 editabled 属性为 true，这样才能开启编辑功能。示例代码如下：

javascript

Copy code

$('#datagrid').datagrid({

url: 'data.php',

method: 'get',

editable: true,

columns: [[

{field: 'id', title: 'ID', width: 50},

{field: 'name', title: 'Name', width: 100, editor: 'text'},

{field: 'age', title: 'Age', width: 50, editor: 'numberbox'},

{field: 'address', title: 'Address', width: 200, editor: 'text'}

]]

});

在上面的代码中，我们通过设置 editable 属性为 true 开启了编辑功能，并且在 columns 参数中指定了每个列的编辑类型，比如文本框、数字框等等。

实现单元格的编辑

当用户点击某个单元格时，可以通过设置 datagrid 的 beginEdit 方法进入编辑状态，然后在编辑完成后通过 endEdit 方法保存数据。示例代码如下：

javascript

Copy code

// 进入编辑状态

$('#datagrid').datagrid('beginEdit', rowIndex);

// 保存数据

$('#datagrid').datagrid('endEdit', rowIndex);

在上面的代码中，rowIndex 是要编辑的行的索引，当用户点击某个单元格时，可以通过 getRowIndex 方法获取当前行的索引。

获取编辑后的数据

当用户编辑完成后，可以通过 getChanges 方法获取编辑后的数据，然后通过 ajax 请求将数据提交到后台。示例代码如下：

javascript

Copy code

// 获取编辑后的数据

var changes = $('#datagrid').datagrid('getChanges');

// 提交数据

$.ajax({

url: 'save.php',

method: 'post',

data: changes,

success: function() {

alert('保存成功！');

},

error: function() {

alert('保存失败！');

}

});

在上面的代码中，我们通过 getChanges 方法获取编辑后的数据，然后通过 ajax 请求将数据提交到后台，最后在 success 或 error 回调中给用户反馈。

二、easyui过时了吗？

这个问题很老了，但是看到了就补充一下啊~~~

bootstrap和easyui区别还是很大的。

bootstrap主要是前端样式，附带一些常见控件，但是很少。

而easyui有大量的控件和丰富的事件，可以快速完全前后台数据绑定。缺点是一源码混淆，二是json格式固定。

三、EasyUI for Angular好用吗?

你如果问的是EasyUI好不好用，那当然是好用的，它是jQuery框架我们怎么能说不好用呢？

但是你问我EasyUI for Angular，我只能说，无可奉告。

你们有一个好，不管什么框架都要拿来比较一番，但毕竟还too young，@angular/material的CDK你们知道吧，那比其他框架不知道复杂到哪里去了，我吐着血用了。

中国有句古话叫做用新不用旧，这是最吼的。

不管是什么框架都得按照设计模式来嘛，当然我们的选择也是很重要的。但是你说我选不选EsayUI，特么都21世纪了作为一个前端框架demo还这么丑，你说我会选么？

-但是它是jQuery框架啊？

说过多少次了，jQuery的归jQuery，VM的归Vm，I'm angry!

四、easyui有人用么?

一般后台用的还是很多的，对美观和跨浏览器要求不高的，开发时间比较少的还是比较好用的。

五、easyui 使用easyui-layout时，能否在title所在行添加按钮?

可以

easyui-layout布局的各个部分还是panel,所以应该是继承panel的特性的.

只需要在

data-options

上添加

tools:'#west-tools'

标记即可

<div data-options="region:'west',split:true,iconCls:'icon-text_list_bullets',tools:'#west-tools'" title="导航菜单" style="width:250px;">
<div id="west-accordion" class="easyui-accordion" data-options="multiple:false,fit:true,border:false">
		//使用代码动态生成
</div>
<div id="west-tools">
<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
<a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
<a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
</div>
</div>

知乎的编辑器真难用-_-!

参考: