flexigrid

【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理

蹲街弑〆低调 — Mon, 06 Apr 2020 14:37:58 +0000

【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理蹲街弑〆低调 2020-04-06 22:37:58

作者: 华磊发表于 2010-08-20 22:27 原文链接阅读: 706 评论: 6

【华磊随笔】善于使用工具（1）-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理

"工欲善其事,必先利其器"

当今Web开发，如何有效的提升用户操作体验已经越来越重要，以现在的技术而言，Javascript 操作dom和style是最有效的手段；Web开发不像Windows开发一样，往往要涉及到很多不同的技术和方向；同时，由于机制的原因和技术的分散，快速有效方便的调试Javascript很大程度上会直接影响到我们实际的开发效率。

笔者自1999年就开始涉猎Web开发，最早时抱着本HTML参考手册，开着记事本就开始写网页了，所谓的调试就是不停的增加alert来跟踪程序的执行状态；实话说，10余年了，由于技术本身的特点，Web脚本的调试方法并没有像其他语言一样有着明显的进步；我还是经常看到一些开发人员用alert进行代码的跟踪，不得不认为是这个领域的悲剧现象。

但就最近两年，由Mozilla、Google、Apple几大巨头又重新点燃了浏览器战场的硝烟，同时，也由于竞争，使得主流的浏览器产品也进入了快速发展的黄金时期；浏览器的功能不断升级，调试手段的不断改进，执行效率的不断提升，同时也提供了更多好的工具和方法来进行更快更方面的Web脚本调试；其中的较好的首推 IE8开发人员工具和FireBug。

笔者并不想一个功能一个功能的介绍，只想分享最近工作的一些心得和体会，更希望通过解决问题的过程和方法给大家带来一些思考。

主场景：分析Jquery FlexiGrid的机制和原理，将其用在自己的项目中。

笔者最近需要实现一个新的asp.net Grid控件替换现用的控件，开始的时候根据实际的需求对javascript grid方案进行了解和研究，主要针对功能、代码结构、产生的Dom结构、异步交互的机制等方面进行对比分析，最终选择了Jquery FlexiGrid，功能和代码结构的分析没什么好说的，针对异步交互和Dom结构则用到了一些工具帮助快速的进行分析。

场景一：使用FireBug分析FlexiGrid的异步交互机制

Firebug是FireFox中非常好的一个插件，用来分析dom模型、网络传输、调试js、研究样式等非常使用；本场景下使用Friebug对FlexiGrid的异步交互进行分析。

首先在FireFox中安装Firebug，直接使用ff访问http://getfirebug.com/ ,直接点击根据提示安装。

重启FF后在Firefox中开启（点击状态栏右下的图标），像下面这个样子：

我们用到的是网络面板，用来跟踪页面的网络交互情况；切换到网络面板，开启网络跟踪

在FF中打开FlexiGrid的演示项目（本文中直接使用http://flexigrid.info/站点），在firebug网络面板中开始显示跟踪网络交互的结果。

嗯，非常实用，我们能清晰的跟踪到打开该页面的所有网络交互，并能够清晰的看到每一条请求的url，状态码，域名，大小，时间线，同时还能看到汇总的情况；我的网络的确很慢。大部分数据来自缓存，打开http://flexigrid.info/还是用了4.8秒，其中，蓝色时间线（Timeline）标志着DomContentOnload（jquery $(document).read,概念大家不陌生吧）的截止点，红色时间线标志Onload截止点，最后一条请求的终点嘛，则是所有Request的终止点。下图清晰地对time line进行了说明和解释。

针对网络面板更专业的解释，参见(http://www.softwareishard.com/blog/firebug/firebug-net-panel-timings/)英文，介绍的很清晰。

回到我们的场景，我们通过XHR查看xmlrequest的请求情况，并仔细查看FlexiGrid的请求和响应的数据（可以称之为协议）。

很好很干净，请求模式用了Post，连get参数都没有（firebug会根据当前的请求展现不同的信息，比如如果有get参数，则会显示get面板，上例返回了json数据，则显示了json面板），post参数很简单（这个场景应用也简单，具体操作时我会针对相对复杂的例子进行分析），返回的数据格式么，标准的json对象，包含了一个rows的数组，嗯，也很简单。用在我的控件里，可以通过get参数传递我的额外信息，json么，标准的格式，按样生成一个就好了。

对比起来，FlexiGrid很好很简单，很适合改造和应用，异步交互上满足要求。

其实：本例介绍的是使用工具来快速的分析和调试页面脚本，实际笔者的选择过程非常痛苦，此处不再累述。

总结一下收获：我们通过firebug跟踪页面的网络请求情况，针对具体的xmlrequest我们分析了具体的请求数据，同时，通过时间线，我们能很清楚的分析页面的加载速度，js执行速度和缓存的应用情况。

场景二：通过分析脚本执行所产生的Dom模型（顺带看看样式）

IE8开发人员工具和FireBug一样是非常强大的工具，实话说，我升级到IE8的唯一理由就是开发人员工具；我们通过这两个工具来实际分析脚本的dom处理结果，看看干净程度、dom结构合理吗。

首先是FireBug,切换到html页，刷下网页或者控件做点事情，关键是在页面展现的是我们需要分析的操作结果。

的确，看到了很多信息，不过一层层找着看的确很累，就很实用，选中后直接点击页面你想看到的地方，html面板就自动切换到对应的上下文，我是通过随便选中了一个Grid的td，然后往上找的。

右边面板显示了很多东西

样式中我们能方便的找到到底是哪些样式（哪文件，哪行代码）影响到当前元素，甚至可以改改看看效果。
计算出的样式则是根据上下文进行计算，给出当前元素的的大多数样式的计算取值（希望我没理解错）。
布局不解释。
Dom么，查看当前元素的dom节点的属性、方法的取值和跟踪（参考vside中的快速监视）。

接下来是IE8开发人员工具，同样我们打开网页执行操作后，在工具菜单打开(或者直接F12)。

和FireBug类似，提供HTML面板和，嗯大体差不多，跟踪样式差不多就是firebug的计算样式，属性相当于Dom（不过感觉还是差些）。

看起来，这两款工具很强大，设计师们可以跟踪样式来分析、设计和优化自己的样式表，对于程序员来说，都很实用，用来分析他人的网页和成果，很方便。

回到场景，我们可以看出，FlexiGrid的Dom机制主要是根据选择的table，产生了6个div和里面的无数表格和元素

.nBtn Div：绝对定位的浮动层，用于显示控制Grid的列的按钮，该层中的元素根据表头的mouse事件动态产生，显示

。

.nDiv Div：绝对定位的浮动层，生成一个表格，用于显示控制Grid的列的控制面板的显示和隐藏，显示

。

.hDiv Div:相对位置的层，负责展示表头，内部生成一个只有thead的表格，同时用作存储表格的列的控制参数，基本上FlexiGrid主要通过hDiv来查询列的配置（比如说列名，排序等），并处理大量表头事件。

.cDrag Div:负责列宽拖放的层，响应事件来调整列宽。

.bDiv Div:包含实际表格数据的层，基本上看到的表格数据都是在这里处理，内部产生一个只有tbody的表格，其中tr对应具体的行，tr的id为row+id(异步返回的Json中的行id)。

其实还有2个，用于分页器跟快速查询，这个演示中没有显示出来。

OK，Dom结构还算清晰，一层一层点下去看，比较干净，每个元素基本都有对应的用处。FlexiGrid再次过关。（实际情况复杂和困惑一些）。

总结：IE8开发人员工具和FireBug可以方便的跟踪页面的Dom结构，具体元素的样式、dom属性方法、布局；两个工具都可以动态的对Dom Css Html进行编辑，并立刻在浏览器中看到效果。

OK，通过上述的分析和理解FlexiGrid入围，我们最终选中它作为我们的控件展示部分的基础。

下一次将具体到dotNetFlexGrid的开发过程，通过若干场景为大家分享一些Javascript 的调试和优化技巧。

评论: 6　查看评论　发表评论

程序员找工作，就在博客园

最新新闻：
· 大公司是如何走上开源之路的(2010-08-23 13:30)
· Firefox 4.0 Beta 4 RC 下载(2010-08-23 13:22)
· 盛大Bambook零售价999元 9月28日正式上市(2010-08-23 13:19)
· 周鸿祎：开心网该学Zynga而不是Facebook(2010-08-23 13:12)
· 蝶变Acorn：撬动英特尔与苹果(2010-08-23 12:57)

编辑推荐：热点新闻：腾讯收购康盛创想

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

来源：oschina

链接：https://my.oschina.net/u/96280/blog/6860

标签

flexigrid

华磊

firebug

比Jquery FlexiGrid更好用 dotnetFlexGrid 1.2beta更新-增加展现模板模式(Grid中可以放编辑控件和任意Html内容了）

我是研究僧i — Sat, 29 Feb 2020 15:16:30 +0000

比Jquery FlexiGrid更好用 dotnetFlexGrid 1.2beta更新-增加展现模板模式(Grid中可以放编辑控件和任意Html内容了）我是研究僧i 2020-02-29 23:16:30

作者: 华磊发表于 2010-08-19 21:29 原文链接阅读: 126 评论: 0

累，先看效果，前两天提问表格内不能编辑的朋友开心了:

2010-8-19 v1.2 beta

修复快速查询时的键盘回车事件与控件外围事件的冲突的问题。
修复快速查询时设置正则表达式时可能导致的语法错误的问题。
数据提供方法DataHandler将不再强制要求与列的绑定顺序一致，现在通过返回的DataTable中的ColumnName自动绑定到合适的列，所以，请保证您的DataTable和控件中的列名一致（区分大小写）。
增加展现模板的功能，现InitConfig初始化时针对列配置增加了一个itemTemplate属性，该属性提供了当前列的展现模板设定。
演示项目中FirstGrid.aspx增加了客户端刷新、服务端刷新和快速查询功能的演示。
演示项目中TestTemplate.aspx提供了使用展现模板的演示。

下载请访问首页置顶链接

简介请访问 JQuery FlexiGrid的asp.net完美解决方案：dotNetFlexGrid-.Net原生的异步表格控件简介和应用效果截图

使用指南请访问 JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(一）

评论: 0　查看评论　发表评论

程序员找工作，就在博客园

编辑推荐：热点新闻：腾讯收购康盛创想

网站导航：博客园首页个人主页新闻闪存小组博问社区知识库

来源：oschina

链接：https://my.oschina.net/u/96280/blog/6858

标签

flexigrid

jquery

how do you pass parameters in asmx using Flexigrid?

拜拜、爱过 — Thu, 02 Jan 2020 00:29:22 +0000

how do you pass parameters in asmx using Flexigrid? 拜拜、爱过 2020-01-02 08:29:22

问题

here's my code:

$('#flex1').flexigrid({
            method: 'POST',
            url: '/services/MHService.asmx/GetSurgicalHistory',
            dataType: 'xml',
            colModel: [
                    { display: 'Surgical Procedure', name: 'SurgicalProcedure', width: 120, sortable: true, align: 'left' },
                    { display: 'Notes', name: 'Notes', width: 120, sortable: true, align: 'left' },
                    { display: 'Complications', name: 'Complications', width: 120, sortable: true, align: 'left' }
                ],
            searchitems: [
                    { display: 'Surgical Procedure', name: 'SurgicalProcedure' },
                    { display: 'Notes', name: 'Notes' },
                    { display: 'Complications', name: 'Complications' }
                ],
            sortname: 'SurgicalProcedure',
            singleSelect: true,
            sortorder: 'asc',
            usepager: true,
            title: 'Surigcal History',
            useRp: true,
            rp: 10,
            showTableToggleBtn: true,
            width: 805,
            height: 200
        });

Now this code works, how do i pass parameters in the webservice? i tried looking for the 'data' parameter in the Flexigrid api, but there seems to be none.

something like this:

            method: 'POST',
            url: '/services/MHService.asmx/GetSurgicalHistory',
            dataType: 'xml',
            data: '{ id: 23, area: "anywhere" }',

回答1:

what I ended up doing was this on line 713 of flexigrid.js i add this

            for(opt in p.optional){
              param[param.length] = {name:opt,value:p.optional[opt]};
            }

then I could do something like this

 $('#flex1').flexigrid({
        method: 'POST',
        url: '/services/MHService.asmx/GetSurgicalHistory',
        dataType: 'xml',
        colModel: [
                { display: 'Surgical Procedure', name: 'SurgicalProcedure', width: 120, sortable: true, align: 'left' },
                { display: 'Notes', name: 'Notes', width: 120, sortable: true, align: 'left' },
                { display: 'Complications', name: 'Complications', width: 120, sortable: true, align: 'left' }
            ],
        searchitems: [
                { display: 'Surgical Procedure', name: 'SurgicalProcedure' },
                { display: 'Notes', name: 'Notes' },
                { display: 'Complications', name: 'Complications' }
            ],
        sortname: 'SurgicalProcedure',
        singleSelect: true,
        sortorder: 'asc',
        usepager: true,
        title: 'Surigcal History',
        useRp: true,
        rp: 10,
        showTableToggleBtn: true,
        width: 805,
        height: 200,
        optional: { id: 23, area: "anywhere" }
    });

its not great but I really could find any other way and I don't see any new versions coming out anytime soon 8 ^ )

回答2:

Change:

data: '{ id: 23, area: "anywhere" }',

to:

params: [{name:'id', value: 23},{name:'area', value: 'anywhere'}],

Or if you want to reload with new Options:

$("#flex1").flexOptions({params: [{name:'id', value: 23},{name:'area', value: 'anywhere'}]}).flexReload();

回答3:

Additional parameters can be specified using the params: option. If you look at line 615-618 in flexigrid.js, you can see where the code loops through each item in p.params, and adds it to the default list (page, rp, sortname, etc).

回答4:

You should try this here:

http://bargaorobalo.net/blog/flexigrid-passar-parametros

Its in portuguese, but means that you PASS additionals parameters to json:

useRp   : true,
rp  : 10,
params: [{name:'ID', value: 100}]

and RECEIVE in json setting variable:

$query     = isset($_POST['query'])     ? $_POST['query']    : false;
$qtype     = isset($_POST['qtype'])     ? $_POST['qtype']    : false;
$id = isset($_POST['ID']) ? $_POST['ID'] : NULL;

Now, you just use this parameter in your SQL CODE:

$sql = "SELECT * FROM PROCEDURE_NAME(".$id.") $where $sort $limit";
$result = runSQL($sql);

回答5:

if you try to load flexigrid data for a particular value in some click Event. try this we can use the query string like a

 var val1=value;
    url: '/services/MHService.asmx/GetSurgicalHistory?qurid='+val1,

to the webservice method and get from webservice using string

getvalue=HttpContext.Current.Request.QueryString["qurid"].ToString();

回答6:

You can use the flexOptions in the onSubmit event when initializing flexigrid, like this:

...
title: 'Surigcal History',
onSubmit: function() {  
  $('#flex1').flexOptions({newp:1,params:[{name: 'id', value: '23'}]});
  $('#flex1').flexOptions({newp:1,params:[{name: 'area', value: 'anywhere'}]});
},
useRp: true,
...

better to use a loop for multiple parameters

This avoids modifying the flexigrid.js directly

来源：https://stackoverflow.com/questions/3323865/how-do-you-pass-parameters-in-asmx-using-flexigrid

标签

web-services

asmx

flexigrid

FlexiGrid “No Items”, response clearly shows data

你说的曾经没有我的故事 — Wed, 25 Dec 2019 06:48:42 +0000

FlexiGrid “No Items”, response clearly shows data 你说的曾经没有我的故事 2019-12-25 14:48:42

问题

Table is visible, looks fine, column headers show up, but after a split second of "processing, please wait..." the status goes to "No Items". Inspecting the response in the DOM shows the data is being returned properly from the web service, formatted as follows:

<?xml version="1.0" encoding="utf-8"?>
<MyDataClass xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <Page>1</Page>
  <Rows>
    <MyDataRow>
      <request_id>13073</request_id>
      <status>501</status>
      <req_by_user_id>herbjm</req_by_user_id>
    </MyDataRow>
    ...
    ....
  </Rows>
</MyDataClass>

Here is the flexigrid javascript in question:

$('#report').flexigrid({
    url: 'reportdata.asmx/rptPendingServerRequestsFlexi',
    dataType: 'xml',
    colModel: [
        { display: 'ID', name: 'request_id', width: 40, sortable: true, align: 'center' },
        { display: 'Status', name: 'status', width: 180, sortable: true, align: 'left' },
        { display: 'Requested By', name: 'req_by_user_id', width: 120, sortable: true, align: 'left' }
    ],
    searchitems: [
        { display: 'ID', name: 'request_id' },
        { display: 'Status', name: 'status', isdefault: true },
        { display: 'Requested By', name: 'req_by_user_id' }
    ],
    sortname: "request_id",
    sortorder: "desc",
    usepager: false,
    title: 'Server Requests',
    useRp: false,
    rp: 30,
    showTableToggleBtn: false,
    singleSelect: true
});

And for bonus points, how can I show the footer even if paging is diabled?

UPDATE: I inspected the DOM for the flexigrid demo and here is how their returned XML is formatted:

<?xml version="1.0" encoding="utf-8"?>
<rows>
    <page>1</page>
    <total>239</total>
    <row id='1'>
        <cell>1</cell>
        <cell>501</cell>
        <cell>Steve</cell>
    </row>
    <row id='2'>
        <cell>2</cell>
        <cell>501</cell>
        <cell>Fred</cell>
    </row>
</rows>

I'm guessing that's why it's not working? To see how I'm building the response, please see this question: vb.net return json object with multiple types?

回答1:

According to various information I have found here and a couple of other locations, flexigrid requires the XML to have specific format:

rows - the row definition
  page - the current page number
  total - the total count of rows in this collection
  row - the row, with a unique property called id
    cell - each row must contain cells in the order that they are displayed on the grid

Since the MyDataClass was generated as a result of your previous question, here are updated versions of those classes that will produce the desired output:

<XmlType("rows")> _
Public Class MyDataClass

    <XmlElement("page")> _
    Public Property Page As Integer

    <XmlElement("total")> _
    Public ReadOnly Property Total As Integer
        Get
            If Me.Rows IsNot Nothing Then
                Return Me.Rows.Count
            Else
                Return 0
            End If
        End Get
    End Property
    <XmlElement("row")> _
    Public Property Rows As List(Of MyDataRow)

    ' Parameterless constructor to support serialization.
    Public Sub New()
        Me.Rows = New List(Of MyDataRow)
    End Sub
    Public Sub New(wPage As Integer, ds As DataSet)
        Me.New()

        Me.Page = wPage

        For Each oRow As DataRow In ds.Tables(0).Rows
            Dim oMyRow As New MyDataRow

            oMyRow.Id = CInt(oRow("id"))
            oMyRow.Name = CStr(oRow("Name"))

            Me.Rows.Add(oMyRow)
        Next

    End Sub
End Class

<XmlType("row")> _
Public Class MyDataRow
    <XmlAttribute("id")> _
    Public Property Id As Integer

    Private m_cCells As List(Of MyDataCell)

    <XmlIgnore()> _
    Public WriteOnly Property Name As String
        Set(value As String)
            Me.AddCell("Name", value)
        End Set
    End Property

    <XmlElement("cell")> _
    Public ReadOnly Property Cells As List(Of MyDataCell)
        Get
            Return m_cCells
        End Get
    End Property

    ' Parameterless constructor to support serialization
    Public Sub New()
        m_cCells = New List(Of MyDataCell)
    End Sub

    Public Sub AddCell(sCellName As String, sCellValue As String)
        m_cCells.Add(New MyDataCell(sCellName, sCellValue))
    End Sub
End Class

Public Class MyDataCell
    <XmlIgnore()> _
    Public Property Name As String
    <XmlText()> _
    Public Property Value As String

    ' Parameterless constructor to support serialization
    Public Sub New()

    End Sub
    Public Sub New(sCellName As String, sCellValue As String)
        Me.New()
        Me.Name = sCellName
        Me.Value = sCellValue
    End Sub
End Class

回答2:

Guys have a look of this demo of flexiuigrid

http://flexidemo.ranjitjena.com/

来源：https://stackoverflow.com/questions/14223125/flexigrid-no-items-response-clearly-shows-data

标签

FlexiGrid “No Items”, response clearly shows data

人盡茶涼 — Wed, 25 Dec 2019 06:48:19 +0000

FlexiGrid “No Items”, response clearly shows data 人盡茶涼 2019-12-25 14:48:19

问题

<?xml version="1.0" encoding="utf-8"?>
<MyDataClass xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <Page>1</Page>
  <Rows>
    <MyDataRow>
      <request_id>13073</request_id>
      <status>501</status>
      <req_by_user_id>herbjm</req_by_user_id>
    </MyDataRow>
    ...
    ....
  </Rows>
</MyDataClass>

Here is the flexigrid javascript in question:

$('#report').flexigrid({
    url: 'reportdata.asmx/rptPendingServerRequestsFlexi',
    dataType: 'xml',
    colModel: [
        { display: 'ID', name: 'request_id', width: 40, sortable: true, align: 'center' },
        { display: 'Status', name: 'status', width: 180, sortable: true, align: 'left' },
        { display: 'Requested By', name: 'req_by_user_id', width: 120, sortable: true, align: 'left' }
    ],
    searchitems: [
        { display: 'ID', name: 'request_id' },
        { display: 'Status', name: 'status', isdefault: true },
        { display: 'Requested By', name: 'req_by_user_id' }
    ],
    sortname: "request_id",
    sortorder: "desc",
    usepager: false,
    title: 'Server Requests',
    useRp: false,
    rp: 30,
    showTableToggleBtn: false,
    singleSelect: true
});

And for bonus points, how can I show the footer even if paging is diabled?

UPDATE: I inspected the DOM for the flexigrid demo and here is how their returned XML is formatted:

<?xml version="1.0" encoding="utf-8"?>
<rows>
    <page>1</page>
    <total>239</total>
    <row id='1'>
        <cell>1</cell>
        <cell>501</cell>
        <cell>Steve</cell>
    </row>
    <row id='2'>
        <cell>2</cell>
        <cell>501</cell>
        <cell>Fred</cell>
    </row>
</rows>

I'm guessing that's why it's not working? To see how I'm building the response, please see this question: vb.net return json object with multiple types?

回答1:

According to various information I have found here and a couple of other locations, flexigrid requires the XML to have specific format:

rows - the row definition
  page - the current page number
  total - the total count of rows in this collection
  row - the row, with a unique property called id
    cell - each row must contain cells in the order that they are displayed on the grid

Since the MyDataClass was generated as a result of your previous question, here are updated versions of those classes that will produce the desired output:

<XmlType("rows")> _
Public Class MyDataClass

    <XmlElement("page")> _
    Public Property Page As Integer

    <XmlElement("total")> _
    Public ReadOnly Property Total As Integer
        Get
            If Me.Rows IsNot Nothing Then
                Return Me.Rows.Count
            Else
                Return 0
            End If
        End Get
    End Property
    <XmlElement("row")> _
    Public Property Rows As List(Of MyDataRow)

    ' Parameterless constructor to support serialization.
    Public Sub New()
        Me.Rows = New List(Of MyDataRow)
    End Sub
    Public Sub New(wPage As Integer, ds As DataSet)
        Me.New()

        Me.Page = wPage

        For Each oRow As DataRow In ds.Tables(0).Rows
            Dim oMyRow As New MyDataRow

            oMyRow.Id = CInt(oRow("id"))
            oMyRow.Name = CStr(oRow("Name"))

            Me.Rows.Add(oMyRow)
        Next

    End Sub
End Class

<XmlType("row")> _
Public Class MyDataRow
    <XmlAttribute("id")> _
    Public Property Id As Integer

    Private m_cCells As List(Of MyDataCell)

    <XmlIgnore()> _
    Public WriteOnly Property Name As String
        Set(value As String)
            Me.AddCell("Name", value)
        End Set
    End Property

    <XmlElement("cell")> _
    Public ReadOnly Property Cells As List(Of MyDataCell)
        Get
            Return m_cCells
        End Get
    End Property

    ' Parameterless constructor to support serialization
    Public Sub New()
        m_cCells = New List(Of MyDataCell)
    End Sub

    Public Sub AddCell(sCellName As String, sCellValue As String)
        m_cCells.Add(New MyDataCell(sCellName, sCellValue))
    End Sub
End Class

Public Class MyDataCell
    <XmlIgnore()> _
    Public Property Name As String
    <XmlText()> _
    Public Property Value As String

    ' Parameterless constructor to support serialization
    Public Sub New()

    End Sub
    Public Sub New(sCellName As String, sCellValue As String)
        Me.New()
        Me.Name = sCellName
        Me.Value = sCellValue
    End Sub
End Class

回答2:

Guys have a look of this demo of flexiuigrid

http://flexidemo.ranjitjena.com/

来源：https://stackoverflow.com/questions/14223125/flexigrid-no-items-response-clearly-shows-data

标签

Grid - When should you switch from html to server side table processing?

妖精的绣舞 — Sun, 22 Dec 2019 21:38:10 +0000

Grid - When should you switch from html to server side table processing? 妖精的绣舞 2019-12-23 05:38:10

问题

,This question is likely subjective, but a lot of "grid" Javascript plugins have come out to help paginate and sort tables. They usually work in 2 ways, the first and simplest is that it takes an existing HTML <table> and converts it into a sortable and searchable information. The second is that it passes info to the server and has the server select info from the database to be displayed.

My question is this: At what point (size wise) is it more efficient to use server-side processing vs displaying all the data and have the "grid plugin" convert it to a sortable/searchable table client-side?

Using datatables as an example, I have to execute at least 3 queries to get total rows in the table, total filtered results for pagination, and the filtered results to be displayed for the specific selected page. Then every time I sort, I am querying again. Every time I move to another page, or search in the table, more queries.

If I was to pull the data once when the client visits the page, I would be executing a single query, and then formatting and pushing the results to the client all at once. This increases the page size, and possibly delays loading of the page once it gets too big. The upside is there will only one query, and all the sorting, searching, and pagination is handled by the plugin, so no waiting for a response and no more queries.

If I was to have just a few rows, I imagine just pushing the formatted table data to the client at the page load would be the fastest. But with thousands of rows, switching to server-side would be the most efficient way.

Where is the tipping point? Is there a tipping point, or is server-side or client-side the way to go 100% of the time?

回答1:

The answer on your question can be only subjective. So I explain how I personally understand the problem and give me recommendation.

In my opinion the data with 2-3 row and 3-4 column can be displayed in HTML table without usage any plugin. The data you display for the user the more important will be that the user will be able to grasp the information which will be displayed. So I think that the information for example have to be good formatted and marked with colors and icons for example. This with help to grasp information from probably 10 rows of data, but not much more. If you just display table with 100 rows or more then you overtax the user. The user will have to analyse the data to get any helpful information from the table. Scrolling of the data makes this not easier.

So I think that one should give the user comfortable or at least convenient interface to sort and to filter the data from the table. The exact interface is mostly the matter of taste. For example the grid can have an additional filter bar

For filtering and even for sorting of the data it's important to have not pure strings, but to be able to distinguish the data types like integer (10 should be after 9 and not between 1 and 2), numbers (correct interpret '.' and ',' inside of numbers), dates (3/20/2012 should be grater as 4/15/2010) and so on. If you just convert HTML table to some grid you will have problems with correct filtering or sorting. Even if you use pure local JavaScript data to display in grid it would be important to have datasource which has some kind of type information and then to create the grid based in the data. In the case you can gives date as JavaScript Date or as ISO 8601 string "2012-03-20" and in the grid display the data corresponds the specified formatter as 3/20/2012 or 20-Mar-2012.

Whether you implement filtering, sorting and paging on the server side or on the client side is not really important for the user who open the page. It's important only that all works quickly enough. The exact choose of the grid plugin, the filtering (with filter toolbar or external controls) and styling of the grid depend on your taste and the project requirements.

来源：https://stackoverflow.com/questions/9793780/grid-when-should-you-switch-from-html-to-server-side-table-processing

标签

Adding data to jQuery-Flexigrid without ajax-request

末鹿安然 — Sun, 22 Dec 2019 20:41:46 +0000

Adding data to jQuery-Flexigrid without ajax-request 末鹿安然 2019-12-23 04:41:46

问题

I want to save some unneeded requests and time for displaying a table the first time and so I thought maybe I could set the initial data directly without any ajax-request. I tried it like that:

$('#testTable').flexAddData('[formatted json here]');

and also that

$('#testTable').addData('[formatted json here]');

But it hasn't any effect. Can I do that and what is the right syntax?

回答1:

Did you use the eval()?

$("#testTable").flexAddData(eval('[formatted json here]'));

or try

$("#testTable").flexAddData(eval('[formatted json here]')).flexReload();

hope this helps

回答2:

I've also met this problem and spent a lot of time trying to solve it. Solution in my case was pretty simple. You just need to specify dataType : "json" obviously in flexigrid() function. Default dataType is XML. So, it don't want to understand JSON:

$("#myTable").flexigrid({dataType : "json"});

回答3:

To supplement Anwar and user1635430 answers, here is an example JSON code:

{
"page": "1",
"total": "9",
"rows": [
    {
        "id": "1",
        "cell": [
            "1",
            "text1",
            "user1",
            "date1"
        ]
    }
 ]
}

The code is done by Anwar, I "stole" it from his answer on some other question.

来源：https://stackoverflow.com/questions/8912543/adding-data-to-jquery-flexigrid-without-ajax-request

标签

javascript

jquery

flexigrid

Changing Jquery FlexGrid's data

给你一囗甜甜゛ — Sun, 22 Dec 2019 19:25:15 +0000

Changing Jquery FlexGrid's data 给你一囗甜甜゛ 2019-12-23 03:25:15

问题

I am having a flex grid. I need to change the data which is showing in that.

In $(document).ready() I am calling a function and I am getting the result.Now what i want is to get data from db using another query.So I just made a function, in that i am adding the needed values to fetch the data in the url.This function is calling when I click a button .But the request is not going .So that is not changing.Please Help me. Thanks

 $(document).ready(function() {

            getAllData(); //first call

            $(".datebetweenList").click(function() {

                    getDataBetweenDates(); //secondcall change in url


     });     
    });


// Calls First
  function getAllData() {

            $("#flex1").flexigrid

                    ({
                        url: '../Handlers/AjaxGetData.ashx?isFlexi=<%=Request.QueryString["ass"]%>&bid=' + document.getElementById("<%=ddlBranch.ClientID%>").value,
                        dataType: "json",
                        colModel: [

                    { display: 'Sl No', name: 'SlNo', width: 10, hide: true, sortable: false, align: 'center' },
                    { display: 'Sl No', name: 'SlNo', width: 60, sortable: false, align: 'center' },
                    { display: 'Code', name: 'asset_Code', width: 180, sortable: true, align: 'left' },
                    { display: 'Name', name: 'asset_Name', width: 150, sortable: true, align: 'left' },
                    { display: 'Serial No', name: 'asset_Sl_No', width: 150, sortable: true, align: 'left' },
                    { display: 'Category', name: 'asset_Category', width: 150, sortable: true, align: 'left' },
                    { display: 'Location', name: 'location_Name', width: 150, sortable: true, align: 'left' },
                    { display: 'Qty', name: 'qty', width: 150, sortable: true, align: 'left' },
                    { display: 'Status', name: 'status', width: 150, sortable: true, align: 'left' },
                    { display: 'Report', name: 'Report', width: 150, sortable: false, align: 'left' }
                    ],
                        buttons: [

                    ],
                        searchitems: [

                    { display: 'Asset Name', name: 'asset_Name' }

                    ],
                        sortname: "asset_Name",
                        sortorder: "asc",
                        usepager: true,
                        singleSelect: true,
                        title: "Asset Stock Report",
                        useRp: true,
                        rp: 15,
                        showTableToggleBtn: true,
                        width: 1240,
                        height: 200
                    });


        }

//Calls Second [on clicking a button]
        function getDataBetweenDates() {
            $("#flex1").flexigrid

                    ({
                        url: '../Handlers/AjaxGetData.ashx?isFlexi=<%=Request.QueryString["ass"]%>&bid='
                         + document.getElementById("<%=ddlBranch.ClientID%>").value + '&isDate=1&eDate=' +
                         document.getElementById("<%=txtEndDate.ClientID%>").value +
                         '&sDate=' + document.getElementById("<%=txtStartDate.ClientID%>").value,
                        dataType: "json",
                        colModel: [

                    { display: 'Sl No', name: 'SlNo', width: 10, hide: true, sortable: false, align: 'center' },
                    { display: 'Sl No', name: 'SlNo', width: 60, sortable: false, align: 'center' },
                    { display: 'Code', name: 'asset_Code', width: 180, sortable: true, align: 'left' },
                    { display: 'Name', name: 'asset_Name', width: 150, sortable: true, align: 'left' },
                    { display: 'Serial No', name: 'asset_Sl_No', width: 150, sortable: true, align: 'left' },
                    { display: 'Category', name: 'asset_Category', width: 150, sortable: true, align: 'left' },
                    { display: 'Location', name: 'location_Name', width: 150, sortable: true, align: 'left' },
                    { display: 'Qty', name: 'qty', width: 150, sortable: true, align: 'left' },
                    { display: 'Status', name: 'status', width: 150, sortable: true, align: 'left' },
                    { display: 'Report', name: 'Report', width: 150, sortable: false, align: 'left' }
                    ],
                        buttons: [

                    ],
                        searchitems: [

                    { display: 'Asset Name', name: 'asset_Name' }

                    ],
                        sortname: "asset_Name",
                        sortorder: "asc",
                        usepager: true,
                        singleSelect: true,
                        title: "Asset Stock Report",
                        useRp: true,
                        rp: 15,
                        showTableToggleBtn: true,
                        width: 1240,
                        height: 200
                    });

        }

回答1:

I got the answer.

We can able to pass the value in option

  $('#flex1').flexOptions({ url: 'a.apsx'?id=1'
            }).flexReload();

来源：https://stackoverflow.com/questions/5064493/changing-jquery-flexgrids-data

标签

jquery-plugins

jquery

flexigrid

Codeigniter: using datagrid

别等时光非礼了梦想. — Sun, 22 Dec 2019 05:57:08 +0000

Codeigniter: using datagrid 别等时光非礼了梦想. 2019-12-22 13:57:08

问题

i'm looking for implement datagrid with CI, better if using ajax.

Searching on Google i've found many tutorial and discussion on how to use Flexigrid-4-CI or jqGrid, anyway i'm still confused on which one could offer more flexibility.

For example, is it possible to set more than one field to filter results with Flexigrid? Besides extending my search i found other libraries such as CarboGrid or datagrid-CI.

Does anyone tried that stuff? What's your suggestion? CarboGrid looks really interesting...

回答1:

I am using datatables, simple, clean, and fast under 1000 rows.

回答2:

I have found a few actively on development

phpGrid - A lot of features
SmartGrid - Simple grid with bootstrap support
Grocery CRUD Datagrid - A framework with Datagrid

来源：https://stackoverflow.com/questions/5245795/codeigniter-using-datagrid

标签

Grails getProperties method does not always return properties in the correct order

妖精的绣舞 — Thu, 12 Dec 2019 19:44:10 +0000

Grails getProperties method does not always return properties in the correct order 妖精的绣舞 2019-12-13 03:44:10

问题

I have a class that looks like this:

class Foo {
    name
    description

    static constraints = {
        name()
        description()
    }
}

I want to add display instances of my class in a Flexigrid. When data is sent to a flexigrid it needs to be in a format like JSON or XML... I have chosen JSON. Flexigrid expects JSON arrays it receives to have the following format:

{
    "page": "1",
    "total": "1",
    "rows": [
        {
            "id": "1",
            "cell": [
                "1",
                "The name of Foo 1",
                "The description of Foo 1"
            ]
        },
        {
            "id": "2",
            "cell": [
                "2",
                "The name of Foo 2",
                "The description of Foo 2"
            ]
        }
    ]
}

To get my Foo objects into this format I do something similar to this:

def foos = Foo.getAll( 1, 2 )

def results = [:]
results[ "page" ] = params.page
results[ "total" ] = foos.size()
results[ "rows" ] = []

for( foo in foos ) {
    def cell = []
    cell.add( foo.id )

    foo.getProperties().each() { key, value -> // Sometimes get foo.getProperties().each() returns foo.description then foo.name instead of foo.name then foo.description as desired.
        cell.add( value.toString() )
    }

    results[ "rows" ].add( [ "id": foo.id, "cell": cell ] )
}

render results as JSON

The problem is that every once in a while foo.getProperties().each() returns foo.description then foo.name resulting in foo.description being put in the name column of my flexigrid and foo.name being put in the description column of my flexigrid for a specific row.

I tried specifying constraints in the Foo domain class so the getProperties would return in the correct order, but it didn't work. How can I make sure getProperties returns properties in a predictable order?

This is how I fixed this issuse:

def items = Foo.getAll()

for( item in items ) {
    def cell = []
    cell.add( item.id )
    Foo.constraints.each() { key, value ->
        def itemValue = item.getProperty( key )
        if( !( itemValue instanceof Collection ) ) {
            cell.add( itemValue.toString() )
        }
    }
}

So Foo.constraints gets a map of constraints where each constraint is an instance of Collections$UnmodifiableMap$UnmodifiableEntrySet$UnmodifiableEntry. After testing I have found this map always returns my Foo static constraints in the order I entered them (also confirmed by Ian). Now only the properties of the item which are in Foo.constraints will be added to the cell for flexigrid.

回答1:

I don't think foo.getProperties() guarantees anything about the ordering. But Foo.constraints is overridden at runtime to return not the original closure, but a Map of ConstrainedProperty objects and the keys in this map are guaranteed to be in the same order as the constraints closure (this is how scaffolding is able to use the constraints ordering to define the order in which fields are presented in the scaffolded views). So you could do something like

def props = [:] // [:] declares a LinkedHashMap, so order-preserving
Foo.constraints.each { k, v ->
  props[k] = foo."${k}"
}

回答2:

foo.getProperties().sort() or if there's no good way to sort the properties in the order you need, you could always define the order of the properties yourself in a list to iterate over.

def properties = ['name', 'description']
properties.each {
     cell.add(foo."$it")
}

来源：https://stackoverflow.com/questions/11150476/grails-getproperties-method-does-not-always-return-properties-in-the-correct-ord

标签