EasyUI DataGrid 单元格编辑 注释版

2024-08-26 16:48

本文主要是介绍EasyUI DataGrid 单元格编辑 注释版,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    最近做组织部项目的时候,需要点击Datagrid,然后能够写入数值;研究了半天没明白是什么意思,后来查资料的时候,直接在easyUI 中文网的Demo中找到了相同的代码,但是代码没有注释,依然不是很理解,后来找同伴一块推敲,基本掌握了整个思路,写出注释来给大家分享;

EeayUI中文网Demo及展示效果:http://www.jeasyui.net/demo/332.html


效果图:


HTML代码;

                    <table id="dg" class="easyui-datagrid" style="width: 1000px; height: 280px;"data-options=" iconCls: 'icon-edit',toolbar: '#tb',rownumbers:true,singleSelect: false,url: 'QuantifyRecord.ashx/ProcessRequest',method:'get',pagination:true,onClickCell: onClickCell"><thead><%--field中带有editor的是能够编辑的,其他列是不能编辑的--%><tr><th data-options="field:'ck',checkbox:true"></th><th data-options="field:'DepartmentName',width:200">单位名称</th><th data-options="field:'Name',width:350">指标名称</th><%--数字,小数点4位,--%><th data-options="field:'Data',width:150,editor:{type:'numberbox',options:{ precision:4}}">成绩</th><th data-options="field:'remarks',width:150,editor:'text'">备注</th></tr></thead></table>

Js代码:

 <script type="text/javascript">//可编辑的datagrid  --TODO:范晓权 给EasyUI扩展方法;添加editCell方法;//方法扩展editCell;$.extend($.fn.datagrid.methods, {//两个参数// jq: // param:对象,包含index 和 鼠标点击的列属性;//jq = [table#dg.easyui-datagrid, context: document, selector: "#dg"], param = Object {index: 1, field: "Data"}  选择的是Data列,editCell: function (jq, param) {//each() 遍历;return jq.each(function () {//options:返回属性对象。 这个时候的this代表:jq;var opts = $(this).datagrid('options');                                                                                                       //getColumnFields:返回列的字段,如果 frozen 设置为 true,则冻结列的字段被返回。//concat:用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本//与HTML的editor属性有关;能够编辑的列和不能编辑的列;//fields的值,和上面HTML对应;//Array[5]//0: "ck"//1: "DepartmentName"//2: "Name"//3: "Data"//4: "remarks"var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));//下面for循环,设定列能够编辑。当不能编辑时,editor的值为undefined,能够编辑值为text;for (var i = 0; i < fields.length; i++) {var col = $(this).datagrid('getColumnOption', fields[i]);col.editor1 = col.editor;//循环到的列,不等于鼠标点击的那一列时,设定列的editor的值为null;if (fields[i] != param.field) {col.editor = null;}}//开始对一行进行编辑。param.index 为行号;对选中的一行进行编辑;$(this).datagrid('beginEdit', param.index);//for循环,设置colfor (var i = 0; i < fields.length; i++) {//getColumnOption:返回指定列的选项。var col = $(this).datagrid('getColumnOption', fields[i]);//给列的editor属性赋值;text 或者其他;col.editor = col.editor1;}});}});//定义一个 行号遍历 赋值为undefined;var editIndex = undefined;//该函数的返回值为Boolean;function endEditing() {if (editIndex == undefined) { return true }//验证指定的行,有效时返回 true。 -范晓权if ($('#dg').datagrid('validateRow', editIndex)) {//结束对一行进行编辑。$('#dg').datagrid('endEdit', editIndex);editIndex = undefined;return true;} else {return false;}}//双击单元格,index是行值,field是列的字段名;function onClickCell(index, field) {//endEditing 的返回值是boolean 值;当返回值为true的时候;if (endEditing()) {//选中一行,行索引从 0 开始。$('#dg').datagrid('selectRow', index)//行值和字段内容  TODO:范晓权.datagrid('editCell', { index: index, field: field });//选中的行值赋值给editIndex;editIndex = index;}}</script>

总结:

    一种学习的方式叫做站在巨人的肩膀上,首先研究别人的代码,然后改进代码,最后成为自己的代码。实现功能是一种学习,更重要的是能够融汇贯通,而这需要对知识有一个静下心了解和探索的过程;

这篇关于EasyUI DataGrid 单元格编辑 注释版的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109126

相关文章

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

easyui同时验证账户格式和ajax是否存在

accountName: {validator: function (value, param) {if (!/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/i.test(value)) {$.fn.validatebox.defaults.rules.accountName.message = '账户名称不合法(字母开头,允许4-16字节,允许字母数字下划线)';return fal

easyui 验证下拉菜单select

validatebox.js中添加以下方法: selectRequired: {validator: function (value) {if (value == "" || value.indexOf('请选择') >= 0 || value.indexOf('全部') >= 0) {return false;}else {return true;}},message: '该下拉框为必选项'}

PDF 软件如何帮助您编辑、转换和保护文件。

如何找到最好的 PDF 编辑器。 无论您是在为您的企业寻找更高效的 PDF 解决方案,还是尝试组织和编辑主文档,PDF 编辑器都可以在一个地方提供您需要的所有工具。市面上有很多 PDF 编辑器 — 在决定哪个最适合您时,请考虑这些因素。 1. 确定您的 PDF 文档软件需求。 不同的 PDF 文档软件程序可以具有不同的功能,因此在决定哪个是最适合您的 PDF 软件之前,请花点时间评估您的

在 Qt Creator 中,输入 /** 并按下Enter可以自动生成 Doxygen 风格的注释

在 Qt Creator 中,当你输入 /** 时,确实会自动补全标准的 Doxygen 风格注释。这是因为 Qt Creator 支持 Doxygen 以及类似的文档注释风格,并且提供了代码自动补全功能。 以下是如何在 Qt Creator 中使用和显示这些注释标记的步骤: 1. 自动补全 Doxygen 风格注释 在 Qt Creator 中,你可以这样操作: 在你的代码中,将光标放在

如何在Excel中根据单元格内容作MSnbsp;…

上篇文章,我们介绍了INDEX+SMALL+IF+ROW的数组公式组合,也就是说只要在IF中通过条件的构造,基本上就可以想提取什么条件的数据都可以,数据查询肯定得心应手。 但是,我们一起强调函数公式不是万能的,尤其是数组公式在海量数据面前,既是软肋也是硬伤,而且构造这个函数组合还需要你要具备或者能理解简单数组公式逻辑,对于在函数公式方面没有深究的人,自然是一头雾水。当然,就像“数据透视表”一样,

jqgrid设置单元格可编辑

1 在单元格的属性列设置为editable。 2 点击编辑按钮的时候,触发某一行设置为edit的状态。 jQuery("#rowed4").jqGrid({url:'server.php?q=2',datatype: "json",colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],colModel

单细胞降维聚类分群注释全流程学习(seruat5/harmony)

先前置几个推文~ 单细胞天地: https://mp.weixin.qq.com/s/drmfwJgbFsFCtoaMsMGaUA https://mp.weixin.qq.com/s/3uWO8AP-16ynpRQEnEezSw 生信技能树: https://mp.weixin.qq.com/s/Cp7EIXa72nxF3FHXvtweeg https://mp.weixin.qq.

在幼儿园管理系统中,会议管理申请会议修改模块:多个与会人员的回显和修改(编辑)!

在幼儿园管理系统中,会议管理>申请会议>修改模块:多个与会人员的回显(复选框)和修改(编辑)!在处理与会人员的回显(复选框)和修改(编辑)出点问题。无法正确的回显(复选框)出来与会人员和修改(编辑)。 最后终于解决:修改(编辑)的思路是:先把原来的该会议记录下的所有与会人员删除,在添加,即可实现修改(编辑)功能。回显(复选框)的思路是:设置一个flag,判断一下是否要选中(复选框),即可实现

数据结构——双链表实现和注释浅解

关于双链表的基础部分增删查改的实现和一点理解,写在注释里~  前言              浅记   1. 哨兵位的节点不能被删除,节点的地址也不能发生改变,所以是传一级指针 2. 哨兵位并不存储有效数据,所以它并不是有效节点 3. 双向链表为空时,说明只剩下一个头节点(哨兵位)  List.h #pragma once#include<