wijmo tab、grid和accordion的相关问题

收藏

1.如何动态添加tab，即根据查询结果来添加数量不定的tab选项，以及tab选项里的内容如何设置；
2.表格grid修改或删除当前行，即修改删除按钮是在表格的最后一个单元格中，如当点击修改时如何获取当前行的某一单元格的值？以及当要获取的单元格设置为隐藏（即column的visible属性设置为false）时，如何获取其值？另外，grid表格是否必须一次完全加载，当数据量较大时能不能只加载当前能显示的数据，在点击翻页时再加载其他数据呢?
3.accordion控件，如何通过循环遍历的方式实现在点击accordion时的相关内容刷新，而不用将每个accordion下的子项都用id标志通过id值匹配的方式加载相关内容呢？
麻烦大神能提供一个展示demo 发给我，非常感谢！

Alice · Alice

回复 1楼风雨的帖子

我们的官网有产品文档和在线演示，你的问题这些问题可以在这里面找到答案。
wijmo中文官网地址：http://wijmo.gcpowertools.com.cn/
产品文档地址：http://wijmo.gcpowertools.com.cn/docs/wijmo/

1.创建动态的Tabs，请参考产品文档：
http://wijmo.gcpowertools.com.cn ... ateDynamicTabs.html
2.请参考Grid文档：
http://wijmo.gcpowertools.com.cn/docs/wijmo/#GridQuickStart.html
有关选择获取单元格值得问题，请参考在线示例：
http://wijmo.gcpowertools.com.cn ... amp;amp;sample=选择
有关数据大分页的问题，请参考在线示例：
http://wijmo.gcpowertools.com.cn ... amp;amp;sample=分页

Grid有很多示例，你的其他疑惑也可以通过在线示例解决：
http://wijmo.gcpowertools.com.cn ... amp;amp;sample=概述

3.Accordion控件的示例请参考在线示例：
http://wijmo.gcpowertools.com.cn ... amp;amp;sample=概述

Alice · Alice

回复 1楼风雨的帖子

从目前来看，当隐藏列的时候，在前台该行数据是不会渲染。
通过Selection获取行数据的时候，隐藏列不会获取。
所以考虑通过命令的方式获取改行的数据。比如点击按钮，就会弹出本行相关列的数据。但我未对隐藏该列后是否可以获取数据做验证。
示例：http://wijmo.gcpowertools.com.cn ... sample=含有命令的列
代码：

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijgrid"], function () {
$(document).ready(function () {
// bind the grid
$("#demo").wijgrid({
allowKeyboardNavigation: false,
highlightCurrentCell: false,
selectionMode: "none",
allowSorting: true,
data: getData(12),
columnsAutogenerationMode: "none",
columns: [
{
headerText: "link",
buttonType: "link",
command: {
text: "Show contry",
click: onCommandInfoClick
}
},
{
headerText: "button",
buttonType: "button",
command: {
text: "Show country",
click: onCommandInfoClick
}
},
{
headerText: "imageButton",
buttonType: "imageButton",
command: {
text: "Show country",
iconClass: "ui-icon-info",
click: onCommandInfoClick
}
},
{
headerText: "image",
buttonType: "image",
command: {
iconClass: "ui-icon-info",
click: onCommandInfoClick
}
},
{ dataKey: "Country", headerText: "Country", dataType: "string" },
{ dataKey: "ProductName", headerText: "Product Name", dataType: "string" },
{ dataKey: "UnitPrice", headerText: "Unit Price", dataType: "currency" },
]
});
function onCommandInfoClick(e, args) {
alert("Country: " + args.row.data.Country);
}
});
});
// random data generators
function getData(count) {
var data = [];
var country = "USA,UK,Germany,Italy,Japan,Brazil,Canada".split(",");
var name = "Lorem,Ipsum,Dolor,Amet,Consectetur".split(",");
var suffix = "LLC,Inc".split(",");
for (var i = 0; i < count; i++) {
data.push({
TransactionID: i,
Country: getString(country),
ProductName: getString(name) + " " + getString(suffix),
UnitPrice: Math.floor(getNumber(5, 10)),
Quantity: Math.floor(getNumber(1, 5)) * 10,
Discount: getNumber(0, 0.3),
OrderDate: getDate(i),
Overseas: Math.random() > 0.8
});
}
return data;
}
function getString(arr) {
return arr[Math.floor((Math.random() * arr.length))];
}
function getNumber(lo, hi) {
return lo + Math.random() * (hi - lo);
}
function getDate(daysAgo) {
return new Date((new Date()).getTime() - daysAgo * 24 * 3600 * 1000);
}
</script>
<div class="container">
<div class="header">
<h2>Editing</h2>
</div>
<div class="main demo">
<table id="demo">
</table>
<div class="demo-options">
</div>
</div>
<div class="footer demo-description">
<p>
这个例子演示了如何使用含有命令的列。
</p>
</div>
</div>

复制代码

下一步我们会尝试将Country列隐藏掉，然后是否还能够得到数据。如果有结果，会立即给你反馈。

Alice · Alice

回复 1楼风雨的帖子

通过我在3楼给出的示例，可以拿到隐藏列的数据。
我做了个示例验证这点。
示例在附件里。

点击按钮，可以获取到改行的数据，即使隐藏掉某列，依然可以获取到该列的数据。请尝试点击Country的CheckBox隐藏该列，然后在grid上点击按钮获取改行数据。

风雨 · 风雨

回复 4楼Alice的帖子

恩谢谢您的回复。
不过除了grid之外的tab和accordion的问题如何解决呢？因为提供的在线链接打开后只显示核心功能、演示、源码几个字，但是看不到具体的演示效果和源码，不知道怎么回事？
另外，关于tree 我看到可以设置为复选框，不知道有没有单选框的呢？有日历控件，不知道有没有整合显示的时间控件（显示时分秒）呢？

Alice · Alice

回复 5楼风雨的帖子

1.创建动态的Tabs，请参考产品文档：
http://wijmo.gcpowertools.com.cn ... ateDynamicTabs.html
在线示例：
http://wijmo.gcpowertools.com.cn ... ts/TabsDynamic.html
如果你不能查看，请下载附件的示例进行查看。

2.对有关Accordion的问题，我不知道理解的对不。
你的需求是，一开始不将所有数据加载到Accordion，而是点击的时候动态加载相应的数据？

风雨 · 风雨

有关accordion的问题主要是：1.并不是说一开始不将所有数据加载到Accordion，而是一开始不将accordion下的可能的tree菜单链接的右侧相应内容不全部加载。左侧菜单的点击关联切换右侧内容是以什么技术实现好呢？是用frame框架吗，点击某个节点对应一个frame界面？
2.初始化时自定义加载的样式，再次再单击的时候，初始化样式被删除，如何解决？

Alice · Alice

回复 7楼风雨的帖子

1.从你的描述来看，Tree也可以实现你的需求。
Tree的示例：http://wijmo.gcpowertools.com.cn ... idgets/TreeCSS.html
附件所示一个简单的演示：

Ｃａｒｏｕｓｅ在线示例：
http://wijmo.gcpowertools.com.cn ... arkupScripting.html
附件是在线示例演示：

２.这个问题能提供一个重现问题的Demo么？我帮你看看。

		自动登录	找回密码
密码			立即注册

wijmo tab、grid和accordion的相关问题

7 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

活字格认证

微信认证勋章

元老葡萄