EasyUI-数据表格的行编辑

最新推荐文章于 2024-05-17 11:40:25 发布
最新推荐文章于 2024-05-17 11:40:25 发布
阅读量472 收藏
点赞数
分类专栏： Jquery EasyUI


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <h2>Row Editing in DataGrid</h2>
    <p>Click the row to start editing.</p>
    <div style="margin:20px 0;"></div>

    <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"
           data-options="
                iconCls: 'icon-edit',
                singleSelect: true,
                toolbar: '#tb',
                url: 'datagrid_data1.json',
                method: 'get',
                onClickRow: onClickRow
            ">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100,
                        formatter:function(value,row){
                            return row.productname;
                        },
                        editor:{
                            type:'combobox',
                            options:{
                                valueField:'productid',
                                textField:'productname',
                                method:'get',
                                url:'products.json',
                                required:true
                            }
                        }">Product</th>
                <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
                <th data-options="field:'attr1',width:250,editor:'textbox'">Attribute</th>
                <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
            </tr>
        </thead>
    </table>

    <div id="tb" style="height:auto">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" οnclick="append()">Append</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" οnclick="removeit()">Remove</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" οnclick="accept()">Accept</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" οnclick="reject()">Reject</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" οnclick="getChanges()">GetChanges</a>
    </div>

    <script type="text/javascript">
        var editIndex = undefined;
        function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#dg').datagrid('validateRow', editIndex)) {
                var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'productid' });
                var productname = $(ed.target).combobox('getText');
                $('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
        function onClickRow(index) {
            if (editIndex != index) {
                if (endEditing()) {
                    $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                    editIndex = index;
                } else {
                    $('#dg').datagrid('selectRow', editIndex);
                }
            }
        }
        function append() {
            if (endEditing()) {
                $('#dg').datagrid('appendRow', { status: 'P' });
                editIndex = $('#dg').datagrid('getRows').length - 1;
                $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
            }
        }
        function removeit() {
            if (editIndex == undefined) { return }
            $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
            editIndex = undefined;
        }
        function accept() {
            if (endEditing()) {
                $('#dg').datagrid('acceptChanges');
            }
        }
        function reject() {
            $('#dg').datagrid('rejectChanges');
            editIndex = undefined;
        }
        function getChanges() {
            var rows = $('#dg').datagrid('getChanges');
            alert(rows.length + ' rows are changed!');
        }
    </script>
</body>
</html>

dxm809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui一行显示多行_EasyUI DataGrid 实现单行/多行编辑功能
weixin_33369808的博客
02-06 1228
// 初始化数据列表function initDatagrid() {$('#dg').datagrid({loadMsg: '数据加载中请稍后……',striped: true,url: '/api/Attendance',sortName: 'ID',sortOrder: 'desc',method: "get",striped: true,border: true,selectOnCheck...
easyui行编辑
xfl4629712的博客
11-29 758
easyui行编辑实例: 关键字:双击开启行编辑,updateRow事件,endEdit事件,onAfterEdit事件 {field:'factCostAmount',title:'实收',width:100,        editor:{ type:'numberbox' }        }, onDblClickRow:function(index,row){
收藏一下，easyui 常用记录
zhenqian52的博客
12-10 238
     公用的一些方法 function reject() {//取消 $('#dg').datagrid('rejectChanges'); editIndex = undefined; } function getChanges() {//取得改变 var rows = $('#dg').datagrid('g...
Easyui学习笔记（一）datagrid行编辑
qq_43701801的博客
05-07 8185
一、定义datagrid <table id="grid"></table> 二、datagrid设置 重点事件： $('#grid').datagrid({ iconCls: 'icon-forward', fit: true, border: false,...
easyui datagrid 手动记录处理编辑行信息
最新发布
无名大白
05-17 228
可用 .data("otherkey", index);随意记录其他信息
datagrid 提交数据
u012089657的专栏
10-31 1037
Index                                 var editIndex = undefined;         $(function () {             bindData();             bindAddButton();             bindDelButton();            
easyui 行编辑
泡泡菜叶的博客
12-19 633
easyui可编辑数据网络（datagrid）<table id="dg" class="easyui-datagrid" style="width: 100%; height: 100%" data-options="
Easyui 行编辑
weixin_34278190的博客
08-01 110
之前没用过，突然用了的时候手忙脚乱的感觉 找了官方文档也好 百度了一大堆东西 表示个人脑袋跟不上思路 直接铺上简化的 以后自己 找起来也方便 以下代码已经执行 应该不会再错了 <table id="dataPackageMenuList" title="套餐菜品列表" class="easyui-datagrid" style="width:100%;heigh...
[转载]easyui datagrid 行内编辑功能
Miss.Squirrel 的博客
10-14 6069
EASY UI 中文官网给出了行内编辑demo：http://www.jeasyui.net/tutorial/36.html，但是updateActions方法实际使用并不成功，在网上查了很久，总算找到了替代方法，即使用 $('#tt').datagrid('refreshRow', index) 替代demo中的$('#tt').datagrid('updateRow',{ ind
easyUI datagrid表格 编辑单元格详解
Lynn_Blog
01-05 1万+
为了研究这里的问题，网上的示例不多，基本上就是两种方法来解决单元格编辑，但是有一种还要重写easyUI的方法，这样的即使可以成功，作为这方面的新手也是很难理解，不适合广泛的使用，easyUi就是让编辑更简单的，能不重写就不重写，更简单的编辑页面这才是easyUI存在的意义。
easyui datagrid 编辑的时候只能编辑一行
w2222288的专栏
11-17 3519
var editIndex = undefined; function dayEnd_edits(id, index) { if(endEdit()){ editIndex = index;//给editIndex对象赋值，index为当前行的索引 var selectRow = $('#storeBelongTo_list').datagrid('selectRow', edit
Easyui datagrid 多行编辑
zhouminfangbdqn的博客
05-24 3834
// 初始化数据列表 function initDatagrid() { $('#dg').datagrid({ loadMsg: '数据加载中请稍后……', striped: true, url: '/api/Attendance', sortName: 'ID', ...
EasyUI学习之easyui datagrid 批量编辑和提交
热门推荐
编程人生
12-21 3万+
前台主要代码：   001 "text/javascript"> 002     $(function() { 003         var $dg = $("#dg"); 004         $dg.datagrid({
easyui表格行内编辑
IF_YOU5849的博客
08-14 518
1 . html代码： <table id="IR_table" class="easyui-datagrid"></table> 2 . js代码： $('#IR_table').datagrid({ view: detailview, border: true, fit: true, collapsible: true,...
easyui-datagrid行编辑，获取每一行某列的值
studying0419的博客
11-04 7596
datagrid行编辑，获取每一行某列的值，进行判空
easyui datagrid 点击保存时正在编辑行数据无法获取的解决方法
cszhmrz的专栏
08-13 3138
解决方法：在点击保存时执行的函数中遍历所有行，逐一关闭编辑： var storageid = $('#id').textbox('getValue'); //保存入库明细 var addrows = $("#storage_jl_dg").datagrid('getRows'); //获取加项列表中的所有行 for(var i=0; i&lt;addrows.length; i++) { ...
EasyUI 表格编辑
秋堂主的博客
08-31 652
表格编辑 1. 目标：要实现的效果 1)、单击编辑表格 2）、右击，弹出右击菜单 3）、编辑后自动保存数据
easyui input框 输入小写自动变大写
weixin_44791737的博客
10-31 1090
此方法为easyUI实现方式 <input id="createMemberCard" name="createMemberCard" class="easyui-textbox" data-options="events:{keyup:fnKeyUp}"> function fnKeyUp(){ this.value=this.value.toUpperCase(); } ...
jQuery EasyUI-CN：详尽的组件实例与参数解析
14. Datagrid（数据表格）：用于显示和编辑表格数据，包括列定义、行操作、排序过滤等。实例展示了如何创建数据表格并绑定数据源。 通过学习这些组件的使用方法，开发者可以快速构建出功能丰富的用户界面，提升Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值