基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(四)

最新推荐文章于 2024-07-29 00:30:56 发布
置顶 最新推荐文章于 2024-07-29 00:30:56 发布
阅读量585 收藏
点赞数
分类专栏： ASp.net jquery MVC EasyUI datagrid 文章标签： Easyui datagrid MVC
ASp.net 同时被 3 个专栏收录
40 篇文章 0 订阅
订阅专栏
jquery
20 篇文章 0 订阅
订阅专栏
MVC
18 篇文章 0 订阅
订阅专栏

基于Easyui框架的datagrid绑定数据，新增，修改，删除方法
第一种：https://blog.csdn.net/u012949335/article/details/81943387
第二种：https://blog.csdn.net/u012949335/article/details/81910663
第三种：https://blog.csdn.net/u012949335/article/details/81777842
第四种：https://blog.csdn.net/u012949335/article/details/81777744 

@{
    ViewBag.Title = "xxlist";
}

<script type="text/javascript" language="javascript">
    $(function () {
        binddata();
    })
    function binddata() {
        var search = $('#search').combobox('getValues');
        search = search.join(',');
        var dm=$("#drpdm").combobox("getValue");
        var info=$("#info").textbox('getValue');
        $("#dg").datagrid({
             width: 'auto',
             height: 'auto',
             scrollbarSize: 0,
             url: 'jh_list',
             queryParams: { "search": search, "dm": dm,"info":info },
             columns: [[
                { field: 'ck', title: '', width: 100,checkbox: true},
                { field: 'bm', title: '编码', width: 100,editor:{type:'textbox',required:true,options:{required:true}}},
                { field: 'lx', title: '类型', width: 70,editor:{
                    type:'combobox',options:{required:true,
                            valueField:'dm',
                            textField:'dmmc',
                            method:'get',
                            url:'dminfo', 
                            required:true
                    }
                }},
                
                { field: 'dz', title: '地址', width: 200,editor:{
                    type:'textbox',options:{required:true}
                }},
                { field: 'rl', title: '容量', width: 80,align:'center',editor:{
                    type:'textbox',options:{required:true}
                }},
                { field: 'sfjy', title: '是否禁用', width: 80,align:'center',formatter: function (value, row, index) {
                        var rowText = "";
                        if (row.sfjy == "1") {
                            rowText = "<input type='checkbox' id='sfjy" + index + "' checked='checked' />"
                        }
                        else {
                            rowText = "<input type='checkbox' id='sfjy" + index + "'/>";
                        }
                        return rowText;
                    }
                },
                { field: 'bz', title: '备注', width: 80,editor:{
                    type:'textbox'
                }},
                { field: 'action', title: '操作', width: 100, align: 'center',
                    formatter: function (value, row, index) {
                       var a="";
                       if(row.flag=="add")
                       {
                         a="<a href=\"javascript:void(0)\" class=\"easyui-linkbutton l-btn l-btn-small l-btn-plain\" data-options=\"iconCls:'icon-add',plain:true\" onclick=\"addOrUpdate('add')\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\">添加</span><span class=\"l-btn-icon icon-add\">&nbsp;</span></span></a>";
                         a+="<a href=\"javascript:void(0)\" class=\"easyui-linkbutton l-btn l-btn-small l-btn-plain\" data-options=\"iconCls:'icon-undo',plain:true\" onclick=\"deleterow()\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\">撤销</span><span class=\"l-btn-icon icon-undo\">&nbsp;</span></span></a>"
                       }
                       else if(row.flag=="edite")
                       {
                         a="<a href=\"javascript:void(0)\" class=\"easyui-linkbutton l-btn l-btn-small l-btn-plain\" data-options=\"iconCls:'icon-save',plain:true\" onclick=\"addOrUpdate('update')\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\">保存</span><span class=\"l-btn-icon icon-save\">&nbsp;</span></span></a>";
                         a+="<a href=\"javascript:void(0)\" class=\"easyui-linkbutton l-btn l-btn-small l-btn-plain\" data-options=\"iconCls:'icon-undo',plain:true\" onclick=\"cancelEdit()\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\">撤销</span><span class=\"l-btn-icon icon-undo\">&nbsp;</span></span></a>"
                       }
                       else
                       {
                         a="<a href=\"javascript:void(0)\" class=\"easyui-linkbutton l-btn l-btn-small l-btn-plain\" data-options=\"iconCls:'icon-edit',plain:true\" onclick=\"editeinfo(this)\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\">编辑</span><span class=\"l-btn-icon icon-edit\">&nbsp;</span></span></a>";
                       }
                       return a;
                    }
                }
            ]],
            onBeforeEdit:function(index,row){
                 if(row.flag!="add")
                 {
                    row.flag="edite"
                 }
                 $('#dg').datagrid('refreshRow', index);
            },
            onAfterEdit: function (index, row) {
                row.flag="unediting";
                $('#dg').datagrid('refreshRow', index);
            },
            onCancelEdit:function(index,row){
                 row.flag="unediting";
                 $('#dg').datagrid('refreshRow', index);
            },
            onBeginEdit:function(index,row){
               var editerow=$("#dg").datagrid('getEditors',index);
               editerow[1].target.combobox('setValue',row.lxm);
            },
             pageSize: 10,
             pageList: [10, 20, 30, 50],
             fitColumns: true,
             striped: true,
//             singleSelect:true,
             pagination: true, //分页控件 
             rownumbers: true, //行号
             onClickCell:function(index,field,value)
             {
                var row=$("#dg").datagrid('getRows')[index];
                if(field=="action")
                {
                    row.field="action";
                    $("#dg").datagrid("unselectRow",index);
                    $("#dg").datagrid("uncheckRow",index);
                }
                else
                {
                    row.field=undefined;
                }
             },
             onClickRow:function(index,row)
             {
                 if(row.field=="action")
                 {
                     $("#dg").datagrid("unselectRow",index);
                     $("#dg").datagrid("uncheckRow",index);
                 }
             }
        })
     }
    
     var EditIndex=undefined;
     function IsEditing()
     {
        if(EditIndex==undefined)
        {
            return true;
        }
        else
        {
            return false;
        }
     }
     function appendrow()
     {
         if(IsEditing())
         {
            $("#dg").datagrid("appendRow",{flag:"add"});
            EditIndex=$("#dg").datagrid("getRows").length-1;
            $("#dg").datagrid("beginEdit",EditIndex);
         }
     }
     function editeinfo(target)
     {
        var thisindex = getRowIndex(target);
        if(EditIndex==undefined)
        {
            EditIndex=thisindex;
            $("#dg").datagrid("beginEdit",EditIndex);
        }
     }
     function cancelEdit()
     {
        if(EditIndex!=undefined)
        {
            $("#dg").datagrid("cancelEdit",EditIndex);
            EditIndex=undefined;
        }
     }
     function deleterow()
     {
        if(EditIndex!=undefined)
        {
            $("#dg").datagrid("deleteRow",EditIndex);
            EditIndex=undefined;
        }
     }
     function addOrUpdate(action)
     {
        if(EditIndex!=undefined)
        {
            var obj=new Object();
            var columns=$("#dg").datagrid("getEditors",EditIndex);
            for(var col in columns)
            {
                var column=columns[col];
                var fieldname=column.field;
                if(column.type="textbox")
                {
                    obj[fieldname]=column.target.textbox('getValue');
                }
                else
                {
                    obj[fieldname]=column.target.combobox('getValue');
                }
            }
            obj.actionflag=action;
            obj.sfjy = $("#sfjy" + EditIndex).prop("checked") ? "1" : "0";
            
            var jsonstr=JSON.stringify(obj);
            var jsonobj=eval('('+jsonstr+')');
            $.ajax({
                url:"jwh_edit",
                dataType:"json",
                data:jsonobj,
                type:"post",
                success:function(data){
                    if(data.result=="1")
                    {
                        $('#dg').datagrid("endEdit",EditIndex);
                         reload();
                        EditIndex=undefined;
                    }
                    else
                    {
                         $.messager.alert("提示","添加失败！","error");
                    }
                }
            })
        }
     }
    
     function delrow()
     {
         var rows=$("#dg").datagrid("getChecked");
         if(rows.length==0)
         {
            $.messager.alert("提示","请选择要删除的信息！","info");
            return;
         }
         var jsbmarray=[];
         for(var item in rows)
         {
            var row=rows[item];
            jsbmarray.push(row.bm);
         }
         var jsbmstr=jsbmarray.join(',');
         $.messager.confirm("提示","确定要删除选择的？",function(isok){
            if(isok)
            {
                $.ajax({
                type:"post",
                url:"jwh_del",
                data:{bm:jsbmstr},
                dataType:"json",
                success:function(data){
                    if(data.result=="1")
                    {
                        reload();
                    }
                    else
                    {
                        $.messager.alert("提示","删除失败！","error");
                    }
                }
                })
             }
         })
     }
     function reload(){
        var search = $('#search').combobox('getValues');
        search = search.join(',');
        var dm=$("#drpdm").combobox("getValue");
        var info=$("#info").textbox('getValue');
        $("#dg").datagrid("reload",{ "search": search, "dm": dm,"info":info });
        EditIndex=undefined;
     }
     function getRowIndex(target) {
	    var tr = $(target).closest('tr.datagrid-row');
	    return parseInt(tr.attr('datagrid-row-index'));
	}
</script>
<div id="menue" class="tools-row">
        @{Html.RenderAction("SearchDm", "Shared", new  { multiple="true" });}&nbsp;
        所属区域：<input class="easyui-combobox" id="drpdm" />
        地址:<input class="easyui-textbox" id="info" />
        <button type="button" class="but-default" onclick="reload()"><span class="icon icon-magnifier"></span> 查询</button>
</div>

<div class="tools-row">
    <table cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
            <td align="right">
            <button id="btnsave" type="button" class="but-primary floatright marginright20" onclick="delrow()"><span class="icon icon-delete"></span>删除</button>
            <button id="btnadd" type="button" class="but-primary floatright marginright20" onclick="appendrow()"><span class="icon icon-add"></span>新增</button>
            </td>
        </tr>
    </table>
</div>
<table id="dg">
</table>

 

筱筱脱脱
关注
专栏目录
easyUI,datagrid小样例
06-11
EasyUI 是一个基于 jQuery 的前端框架，主要用于构建用户界面，尤其在企业级Web应用中广泛应用。它提供了丰富的组件，如对话框、表单、菜单、布局等，而 Datagrid 是 EasyUI 中的一个重要组件，用于展示和管理表格...
[转载]easyui datagrid 行内编辑功能
Miss.Squirrel 的博客
10-14 6093
EASY UI 中文官网给出了行内编辑demo：http://www.jeasyui.net/tutorial/36.html，但是updateActions方法实际使用并不成功，在网上查了很久，总算找到了替代方法，即使用 $('#tt').datagrid('refreshRow', index) 替代demo中的$('#tt').datagrid('updateRow',{ ind
(原创)easyui前台改变datagrid某单元格的值
热门推荐
d7011800的专栏
03-19 7万+
有时候前台完成某个操作后要修改datagrid的值, 也许这个datagrid是没有保存的, 所以要修改后才能传递到后台; 也许要其他操作过后才需请求后台; 这些情况都需要前台对datagrid的单元格进行修改操作: 假设我们有一个” staffLogDetailGrid”的datagrid;   // 得到columns对象 var columns = $('#staffLo
easyui datagrid修改某条记录后只刷新当前行数据
weixin_45219973的博客
05-31 1442
需求：只编辑后端返回的某条数据，编辑后不刷新页面重新加载数据，只刷新当前行数据，避免刷新页面后重新找刚刚那行的数据 实现：refreshRow方法，如下： var row = $('#gridlist').datagrid('getSelected');//获取当前行数据 var index = $('#gridlist').datagrid('getRowIndex', row);//获取当前行索引 $('#gridlist').datagrid('refreshRow', (index));//更
Easyui 使用datagrid控件中的updateRow方法更新某个单元格时无效
LYQ2332826438的博客
01-22 2598
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LYQ2332826438 近期在做项目时，使用了easyui，在做到更新表格中的某一行数据时，遇到了调用updataRow方法时，数据更新无效的情况 表格请求数据无问题 $("#dgd_buliding_ref").datagrid({                 singleSelec...
EasyUI(DataGrid修改&删除)
weixin_56996467的博客
04-12 727
目录 一、项目结构 二、前台代码 三、后台代码 四、运行效果: 一、项目结构 二、前台代码 editBook.jsp： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div> <form id="bookForm" method="post"> <input type="hidden
easyui-datagrid12-demo.zip
11-30
EasyUI 是一个基于 jQuery 的轻量级前端框架，主要用于构建用户界面。在“easyui-datagrid12-demo.zip”这个压缩包中，我们主要关注的是EasyUI 的 DataGrid 组件，以及可能涉及到的行内编辑功能。DataGrid 是 EasyUI...
easyUI datagrid 做的工程
03-03
EasyUI 是一个基于 jQuery 的前端框架，主要用于构建用户界面，特别是在企业级应用中十分常见。在本项目中，"easyUI datagrid 做的工程" 提到的是使用 EasyUI 的 datagrid 组件来实现的功能丰富的表格应用。Datagrid...
EasyUI增查改删操作示例
10-06
EasyUI 是一个基于 jQuery 的轻量级前端框架，主要用于构建美观、易用的 Web 用户界面。这个"EasyUI增查改删操作示例"提供了一套完整的实践教程，旨在帮助初学者快速掌握如何使用 EasyUI 实现数据管理中的基本功能：...
easyui datagrid在编辑状态下更新列的值
06-17
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值，并在结束编辑后得到的row的数据为更改后的数据。
easyui datagrid中update后 getChanges获取不到
05-22
一个update扩展方法 文档中一种是比较笨的方法 一次只能修改一个列而且受列编辑类型影响（比如number datetime）扩展一次编辑多列，不受编辑类型影响，没有编辑属性也可以。
easyui的datagrid在编辑状态下刷新当前列,不结束编辑
weixin_33795743的博客
06-27 1260
2019独角兽企业重金招聘Python工程师标准>>> ...
基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(三)
u012949335的专栏
08-21 452
基于Easyui框架的datagrid绑定数据，新增，修改，删除方法 第一种：https://blog.csdn.net/u012949335/article/details/81943387 第二种：https://blog.csdn.net/u012949335/article/details/81910663 第三种：https://blog.csdn.net/u012949335/arti...
​easyui datagrid 参数详解​
zhaofuqiangmycomm的博客
10-25 3609
一.数据表格属性（DataGrid Properties） 二.列属性（ColumnProperties） 三.事件（Events） 四.方法（Methods）
jquery的datagrid的增删改查属性
xclsky的博客
12-25 517
1 datagrid是jquery的一个table格式的组件。首先需要添加jquery的一些样式和js 如： 2 然后设置table的id名。这样就可以设置对应的id为datagrid属性了 如： $("#sda_prop").datagrid({ width:400, height:600, idField:'id', rownumbers:tru
EasyUI 的 DataGrid 插件，通过扩展属性的方式给序号列增加个性化标题
最新发布
极客栈
07-29 568
在 EasyUI 的 DataGrid 中，没有直接的属性可以设置行号列的标题，但是你可以通过扩展的方法来实现这一功能。通过扩展 EasyUI 的 DataGrid 插件，来增加一个 ​​ 属性，以便通过属性来设置行号列的标题。
easyui05(datagrid数据新增)
qq_73126462的博客
06-17 673
myDialog。
使用easyui导出datagrid数据到Excel
在Web开发中，EasyUI是一个基于jQuery的UI库，提供了丰富的组件，如datagrid，用于展示和操作表格数据。而当用户需要将这些数据导出为Excel文件时，可以自定义JavaScript函数来实现这一功能。以下是一个名为`export....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值