Easy UI combogrid动态加载数据

场景:

  datagrid的每一行允许编辑,一行中有一个字段,编辑时,提供下拉框选项,供选择。

  下拉框选项有多个列。如下图所示:(点击红框内的下拉按钮,会弹出绿框内的内容)

  

  

  要求:

    每行弹出的下拉框内容并不完全一致,需要根据某些变化的条件,随机获取。

代码:

path是datagrid的一个字段,这个字段在编辑时,需要以下拉选项的形式出现。这里只展示一个字段的编辑选项,是如何配置combogrid动态加载下拉框选项值的。
        {          // datagrid的其他字段...        },        {
                field : ‘path‘, // 实际属性
                title : ‘Path‘, // 页面显示的列名
                editor : {
                    type:‘combogrid‘, // 指定使用combogrid组件
                    options:{         // combogrid组件的属性设置
                        panelWidth : 450,
                        panelHeight : 250,
                        idField : ‘id‘, // 选中下拉选项时,实际保存的值,来自columns
                        textField : ‘path‘, // 选中下拉选项时,框中显示的值,来自columns
                        method : "GET",     // ajax动态请求的方式
                        url : ‘/rest/test?id=‘ + $(‘#id_select‘).val(), // 在这里配置url,并不好用。url的值需要在每次请求前动态修改才可以。
                        mode : ‘remote‘, // 指定是调用远程方法获取
                        fitColumns : true,
                        multiple: false,
                        editable: false, // 不可编辑
                        columns : [[
                                    {
                                        field : ‘id‘,
                                        title : ‘id‘,
                                        width : 50,
                                        hidden : true
                                    },
                                    {
                                        field : ‘path‘,
                                        title : ‘Path‘,
                                        width : 150
                                    },
                                ]],
                        onBeforeLoad : function(){                 // 关键代码:在每次ajax请求前,修改url的值
                            $(this).datagrid(‘options‘).url = ‘/rest/test?id=‘ + $(‘#id_select‘).val();
                        },
                        loadFilter: function (respose){                 // 关键代码:将返回的值,转为combogrid可识别的数据。                 // combogrid只要两个字段:total,总数;rows,所有列的数据,是一个数组。                  // response.data是一个对象list
                            respose.total = respose.data.length;
                            respose.rows = respose.data;
                            return respose;
                        },
                    }
                },
            },       {          // datagrid的其他字段...       }
时间: 2024-10-21 12:09:49

Easy UI combogrid动态加载数据的相关文章

使用angularjs ui grid 动态加载列名

来个开场白吧: 我是做.net开发的,来到新公司后,缺一个前端开发,SO,我就不得不挠着头干活呀......之前也就写写js,jq,刚看到前端架构的时候一脸懵逼...心里就有三个字:什么鬼!什么angularjs,angularjs ui grid,bootstrap,阿西吧.. 木有办法,总不能又跳槽吧.熟悉了一两天业务和代码后,经理说:"开干!". 首先,做的第一个功能就是使用angularjs ui grid 动态加载列.(这里不得不吐槽一点,ui grid的官方文档实例太少了,

android左右滑动加载分页以及动态加载数据

android UI 往右滑动,滑动到最后一页就自动加载数据并显示 如图: Java代码 package cn.anycall.ju; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.content.ActivityNotFoundException; impo

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 [JavaScript] 纯文本查看 复制代码

ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)

ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)

ASP.NET MVC动态加载数据

ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table> <tr> <th style="width:10px;"><input id="SelectAll" type="checkbox" /></th> <th>ID</th> <th>Port_Start&l

滚屏加载--无刷新动态加载数据技术的应用

index.html <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

C# checklistbox控件用法总结(怎样得到多选的值,以及动态加载数据)

C# checklistbox控件用法总结(怎样得到多选的值,以及动态加载数据) 一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值. 其实这里遍历的只是高亮的值并不是打勾的值.遍历打勾的值要用下面的代码: for (int i = 0; i < checkedListBox1.Items.Count; i++) { if (checkedListBox1.GetItemChecked(i)) { MessageB

用collection view动态加载数据卡顿的可能原因

在用collectionview动态加载数据时有个好处,就是cell得到了复用,如果整屏显示一个cell,最多只有两个cell,坏处就是需要不断的刷新cell,这时候容易卡顿. 每次滑动collectionview会调用代理方法,获取新的cell,这时你要将数据传给cell并进行显示. 现在的情况是快速滑动的时候和慢速滑动的时候不会卡顿,快速滑动的时候不会请求数据,所以卡顿原因可能是在请求数据的时候,慢速滑动的时候因为间隔时间长,数据应该都加载好了,所以卡顿原因可能是间隔过短,cell已经被创建

动态加载数据新的可行性

动态加载数据就是随着用户的交互情况来加载数据,避免一次全部加载浪费流量和卡顿. 最典型的情况就是用户查看每天的信息这种状况. 最开始我的做法是用一个scrollview和三个view来解决.先实现一个轮播图效果,每次用户左滑和右滑之后又将页面跳回到中间的页面,这个时候中间页面的状态应该和左滑或右滑页面的状态相同.所以每次都是先加载左中右三天数据,滑动到右边后,重置三天数据跳转到中间. 但这种有个问题,就是很难实现bounce反弹效果,即使实现了代码会非常乱,还有就是快速滑动的时候造成的无法滑动问