datagrid-detailview 使用总结

最新推荐文章于 2019-08-15 09:30:21 发布

原创最新推荐文章于 2019-08-15 09:30:21 发布 · 808 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui-datagrid #datagrid-detailview #detailview

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文总结了在使用 datagrid-detailview 时遇到的两个主要问题：1.前端报 'detailview not defined' 错误，原因是jQuery版本与datagrid-detailview.js不兼容，解决方法是下载兼容的版本。2.如何控制只有符合条件的行显示detailview内容，通过理解datagrid的rowIndex和rowData属性实现条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

datagrid-detailview 使用总结

具体的使用方法大家可以参考下边这篇博文，个人感觉使用方法总结的还是比较好的，本人也比较懒，就不做重复工作了。

https://blog.youkuaiyun.com/ytm15732625529/article/details/78317634

本片博客只总结再使用过程中遇到的问题和解决方法。

问题一：

我在使用的过程中，前端控制台总会报detailview not define;

原因：

是因为我使用的时候用的jQuery版本和datagrid-detailview.js版本不兼容。

解决方法：

http://www.jeasyui.net/extension/189.html

点击上边链接，滑到最下边；下载datgrid-view的.zip文件。可以将对应的jQuery和datagrid.js都放到项目中。

问题二：

在使用中我并不需要所有行都显示内容，我只需要某个符合条件的（比如有关联子文件的）行，点开之后显示内容（相关联的子文件的信息）。那么我该怎么解决？

解决方法：

在描述解决方法之前，我们需要了解一下，datagrid中一个比较中要的方法的属性的含义。

 detailFormatter: function (rowIndex, rowData) {//注意2  
            console.log(rowIndex);//输入到控制台
            console.log(rowData);////输入到控制台
            if(rowData.formalStatusCode==8){
            return '<div style="padding:2px"><table id="ddv-' + rowIndex + '"></table></div>';
            }

在需要对这个方法做控制的时候，我们首先需要做的就是了解这个方法。大家可以用输入到控制台的方法来查看这两个属性的含义（如上）；

rowIndex：代表的是它的行号（在我看来是如此，不过是从0开始的，类似数组）

rowData：代表的是这行的数据。（知识重点）

我们既然知道rowData包含了一行所有的数据，那么我们拿到其中一项，然后通过它来做判断就会比较容易（如上if判断）。

如有问题：欢迎留言指导