首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在devextreme中使用ajax发送选定的datagrid对象

在devextreme中使用ajax发送选定的datagrid对象,可以按照以下步骤进行操作:

  1. 首先,确保你已经引入了devextreme相关的库文件和样式表。
  2. 在HTML页面中创建一个datagrid,并设置相关的配置项,例如数据源、列定义等。
代码语言:txt
复制
<div id="gridContainer"></div>

<script>
    $(function() {
        $("#gridContainer").dxDataGrid({
            dataSource: yourDataSource,
            columns: yourColumns,
            selection: {
                mode: "multiple",
                showCheckBoxesMode: "always"
            }
        });
    });
</script>
  1. 创建一个按钮或其他触发事件的元素,用于发送选定的datagrid对象。
代码语言:txt
复制
<button id="sendButton">发送选定的对象</button>
  1. 在JavaScript代码中,使用jQuery的ajax方法获取选定的datagrid对象,并发送到服务器。
代码语言:txt
复制
$(function() {
    $("#sendButton").click(function() {
        var selectedRows = $("#gridContainer").dxDataGrid("instance").getSelectedRowsData();
        
        $.ajax({
            url: "yourServerUrl",
            type: "POST",
            data: JSON.stringify(selectedRows),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                // 处理成功响应
            },
            error: function(xhr, status, error) {
                // 处理错误响应
            }
        });
    });
});

在上述代码中,getSelectedRowsData()方法用于获取选定的行数据,JSON.stringify()方法将数据转换为JSON字符串,然后通过ajax发送到服务器。你需要将yourServerUrl替换为实际的服务器端接口地址。

这样,你就可以在devextreme中使用ajax发送选定的datagrid对象了。

注意:以上代码仅为示例,实际情况中你需要根据自己的业务需求进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

day54_BOS项目_06

今天内容安排: 1、业务受理环节分析 2、创建业务受理环节对应数据表(业务通知单、工单、工作单) 3、实现业务受理、自动分单 4、数据网格datagrid编辑功能使用 5、基于数据网格datagrid...、自动分单 注意:需要将crm接口扩展方法复制到bos接口中 业务受理页面:WEB-INF/pages/qupai/noticebill_add.jsp 第一步:为手机号输入框绑定离焦事件,发送ajax...请求,提交输入手机号到Action,在Action调用crm代理对象,访问crm服务,根据手机号查询客户信息,返回json数据     来电号码:              ...编辑功能使用 列(Column)属性:数据网格(DataGrid列(Column)是一个数组对象,它每个元素也是一个数组。...4、基于数据网格datagrid 编辑功能实现工作单快速录入功能 第一步:在quickworkorder.jsp页面增加发送ajax请求,提交当前结束编辑行数据到服务器,完成保存操作代码,如下:

2.3K20

day60_BOS项目_12

实现修改密码功能 1、window创建使用 --> easyui-window 2、EasyUIvalidatebox 3、发送ajax提交修改后密码 1.3、项目第三天 整体分析基础设置部分需求...datagrid样式 2、由datagrid发送ajax请求获取服务端json数据,构造datagrid 3、使用EasyUI提供API(js代码)动态构造一个datagrid 使用datagrid实现取派员分页查询...实现区域分页查询,重构分页代码(将Action属性和方法统一提取到BaseAction) 实现分区添加功能 1、jQuery EasyUI combobox下拉框 使用(2种方式)...datagrid编辑功能使用 onAfterEdit:function(rowIndex,rowData,changes) { // 数据网格事件:当前行结束编辑状态时触发 } 基于数据网格datagrid...查询、添加) 角色管理(添加、查询) 用户管理(添加、查询) 修改自定义BOSRealm授权方法,通过查询数据库获得登录人权限 使用ehcache 缓存权限数据 系统左侧菜单根据当前登录用户权限动态展示

1.7K20
  • day51_BOS项目_03

    2.1、基础档案设置 功能概述:     在其他系统通常称为“数据字典”。`提供基础数据,供其他模块使用`。     ...主要是针对本系统一些自定义项,需要参照录入,并作为统计分析和计算维度,用户根据自己需要动态设置基础档案;对于自定义档案支持多级定义;     系统会事先预置一些系统级别的基础档案,线路类型...使用方式 数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富支持。...ajax请求获取json数据,并显示,常用,该数据网格可以自己发送ajax请求     方式二:发送ajax请求获取json数据,并显示,常用,该数据网格可以自己发送ajax请求     ...4.3、方式三:通过js代码,使用插件提供API动态创建datagrid,大量使用     方式三:通过js代码,使用插件提供API动态创建datagrid,大量使用     <table

    3.4K10

    Flex笔记_MX DataGrid、列表和树

    for循环,按照顺序将集合一个对象分配给下一个项渲染器。...填充 dataProvider: 可能是低级对象Array、Boolean或String; 但扩展了ListCollectionView数据类型(ArrayCollection)填充dataProvider...集合可以被看做是内置了排序及过滤功能高级数组。此外,集合还为使用dataProvider对象提供了通用即插即用接口。...dataChange事件是一个可绑定事件,其它组件可以进行监听,并在事件被分发时执行某种处理或操作。 集合在其状态发生变化时,会自动使用组件发送通知,以便这些组件刷新显示数据。...使用层次化数据:XML是一种按照嵌套结构组织数据结构;Flex3,XML和XMLList对象多少有一点冗余,所以Flex4删除了XML对象,取而代之使用XMLList和XMLListCollection

    2.7K20

    easyUI组件datagrid二次封装

    此处是项目中大组件具体ID,可以用this.selector代替作为当前对象方法 * * 现在使用是该头部选项卡tabHeaderCollection下正在访问页面选项id...//option:有三种类型值:1.字符串:返回立即执行函数执行后结果;2.数组:对grid进行初始化,最简单一种grid使用方式;3.对象:可以是对grid进行初始化,也可以是获取需要执行函数...请求对象包括子对象newRequest and updateRequest,子对象url和data是必填 * @param rowMsg row数据存在时候提示信息...$(self).datagrid('getPager').pagination('loading') : ''; //发送获取分页数据请求...= handlerFns; } //返回datagird自身,链式 return grid; } })(jQuery); //jqueryajax

    2.3K30

    【ssm个人博客项目实战08】博客分页显示以及模糊查询,删除。前言1、上篇回顾2、具体编码3、测试与小结

    1、上篇回顾 在上一节我们是完成了博客回台部分,现在我需要在前台拿到回台传来数据并且给以显示出来。 不知道大家还记得我们在博客类别管理里面,easyuidatagrid用法吗?...在这里我们继续使用datagrid 只不过多了一个模糊查询。 接下来给大家看看实际效果 ?...属性就可以,所以这里需要进行格式处理 searchBlog()这个方法就是通过input输入值 往后端发送查询请求查询数据 deleteBlog()这个方法就是删除博客 openBlogModifyTab...", function(r) { //确定删除 if(r) { //发送ajax请求...load方法,比如我已经定义一个datagridid为dg,那这个方法使用方式为 $(“#dg”).datagrid(“load”,{ }); 它参数为一个json对象,里面写是你要传输参数键值对

    77540

    easyUI datagrid避免二次渲染

    easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回json数据;另一种是加载js对象,也就是使用loadDate方法。...url方式加载数据 调用方式 目前可能大多数人都是选择这种方式,因为跟流行框架结合也比较好,使用url的话,可以将url写在DOM里面或者申明datagrid对象url属性,以下两种方式都是可以...options null 获取datagrid实例各项参数值,常用参数有url,pageNumber,pageSize这三个参数在请求数据以及分页功能起重要作用....二次加载问题 对于使用url方式初学者,经常碰到重复请求问题,这个问题根源是因为一旦设置了url参数,Datagrid组件在实例化时候就会做请求,如何避免二次加载这样问题呢,个人觉得注意以下两点基本就可以防止二次加载了...所以在要绑定事件情况下,索性就不要使用class方式注册了。

    97040

    WebFormGrid页面页脚DropDownList事件

    temp=.5394251 ,提到了一个很有意思问题。...【我datagrid页脚有一个dropdownload控件,如果是一个BUTTON按钮的话,可以在datagrid DG_Card_ItemCommand事件里来响应BUTTON按钮事件,e.CommandName...==”IButton_Name”得到 而我现在是一个dropdownload控件,当它选定一条记录时候,怎么触发他事件啊】 之前我也曾经看到过类似的问题,想当然认为加上一个事件不就可以了吗 但是发现...Page.IsPostBack) { DataGrid1.DataSouce = ……….; DataGrid1.DataBind(); } 所以,在页面第一次加载时候,我们是执行了这个...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    62720

    EasyUI学习笔记---Datagrid真分页

    EasyUI Datagrid组件在我看来功能还是很强大,在我使用过程遇到分页请求问题困扰了一天才解决,下面我就把我遇到问题分享一下 //datagrid数据表格渲染 $("#dg").datagrid...function(param, success, error) { var pageNumber = param.page; var pageSize = param.rows; $.ajax...一 遇到第一个问题是跨域,这个在之前文章有些过,这里就不赘述了; 二 其次就是请求回数据怎么渲染到表格,由于是真分页,所以每次查询数据只是当前页面的数据,并不是所有的数据,但是页脚显示数据总数必须是所有数据...最后通过查看资料发现,loadData方法可以传入一个json格式数据$("#dg").datagrid('loadData', { total: data.result.page.totalRecord...) { $("#dg").datagrid('loading'); //显示加载信息 $.ajax({ type: "get", url: url, dataType

    1.1K30

    day53_BOS项目_05

    第一步:使用下拉框展示取派员数据,需要修改comboboxURL地址,发送请求              选择取派员                      <input...Tengine性能和稳定性已经在大型网站淘宝网,天猫商城等得到了很好检验。它最终目标是打造一个高效、稳定、安全、易用Web平台。...// 实际开发方式:我们只需要在applicationContext.xml配置一下,由spring工厂帮我们去创建代理对象,再将该代理对象注入给action、service,他们再去使用该代理对象即可...BaseAction     @Autowired      protected CustomerService remoteProxy; 第五步:为定区列表页面“关联客户”按钮绑定事件,发送2次...ajax请求访问DecidedzoneAction,在DecidedzoneAction调用hessian代理对象,通过代理对象可以远程访问crm获取客户数据,获取数据后进行解析后,填充至左右下拉框中去

    1.2K40

    Silverlight 2 Beta 1学习资源

    Using Silverlight 2's DataGrid with WCF + LINQ to SQL: 这个15分钟录像博客示范了如何在服务器上建造一个LINQ to SQL对象模型,然后用WCF...将其发布,然后示范了如何建造一个使用了新Silverlight DataGrid控件Silverlight客户端,该客户端调用WCF服务获取LINQ to SQL数据,将其绑定到DataGrid上。...Simple Editing of Web Service Data in a DataGrid: Mike Taulty有一篇好贴,展示如何在服务器上建造WCF服务,然后从Silverlight 2客户端使用它来获取数据...Sorting with Silverlight 2's DataGrid Control: Silverlight 2 Beta1DataGrid控件还没有内置列数据排序支持(将在Beta2提供...在这个贴子里,他展示了如何使用一个定制header列方法来实现排序。也看一下Matt这里贴子,该文提供了一个DataGrid测试页面,展示了目前DataGrid若干特性。

    1.2K70

    easyjsp增删改查在一个jsp页面上

    Ⅳ:使用ajax方法调用后台接口 使用ajax方法调用后台接口大致分为 壹:type 请求方式  贰:url 请求路径  叁:data 请求数据  肆:async 是否异步  伍:Content-Type...(内容类型),一般是指网页存在 Content-Type  陆:processData 默认为true,当设置为true时候,jquery ajax 提交时候不会序列化 data,而是直接使用data...修改时候需要把id  set进去   Ⅴ:使用ajax方法调用后台接口大致分为 壹:type 请求方式  贰:url 请求路径  叁:data 请求数据  肆:async 是否异步  伍:Content-Type...(内容类型),一般是指网页存在 Content-Type  陆:processData 默认为true,当设置为true时候,jquery ajax 提交时候不会序列化 data,而是直接使用data...row:表示当前行 index:表示当前行下标 可以使用return返回想要数据显示在单元格 */ formatter : function(value,

    4.6K20

    新手学EasyUI(七)----DataGrid CheckBox 动态选中

    下面说一下具体实现功能是什么样。 页面首次加载时候,右面的表格CheckBox都处于未选中状态,现在是这么设计,时段只有这么8条数据在一张单独表里面。...用户和时段关系放在另一张表,当点击左侧具体用户时候,根据表关系,勾选右侧DataGrid与之对应数据。这就是要实现功能。...具体实现如下: 根据选中用户ID去表查询与之对应时段数据,然后当数据返回到前台之后,先将json串转换成json对象,然后循环遍历对象数据,将表格对应数据选中,代码如下: $.ajax...val.period_id) { //选中 $('#dgTimeEdit').datagrid...,表格行数是从0开始

    2.3K20
    领券