ext2.x表格grid动态行合并解决方案
[问题点数：100分，结帖人woshilitao5]
ext2.x表格grid动态行合并解决方案
[问题点数：100分，结帖人woshilitao5]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。SlickGrid首页、文档和下载 - Web表格控件 - 开源中国社区
当前访客身份：游客 [
当前位置：
SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列，调整列宽度，排序，自定义单元格展示格式和编辑器，支持编辑和创建新记录。
授权协议：
开发语言：
操作系统：&跨平台&
收录时间：
雷剑龙 发表于1年前
IT_你好 发表于2年前
红薯 发表于5年前
，最后回答(3年前)：
使用 SlickGrid 中的任何问题
共有 967 个类似软件
ClickHeat 是一个很酷的 JavaScript 库，它可以帮你统计一个页面上用户点击的热度分...
CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。目前已支持的算法...
Kalendae 是一个 JavaScript 实现的日期选择工具，无需依赖其他 JS 库。 在线演示：...
Sea.JS 是一个遵循 CommonJS 规范的模块加载框架，可用来轻松愉悦地加载任意 Java...
PaintWeb 是一个 Web 应用程序，可以让你直接在浏览器上进行绘图，它使用的是新的 ...
Tangram是Baidu开发的一套简单可依赖的Javascript库，它的特点： * 体积小巧，性能...
jsDraw2D是jsFiction公司提供的第一个产品，他们计划创造各种各样的革命性的JavaS...
ControlJS 主要为了是解决网页加载中Js文件的性能问题，ControlJS的原理 ControlJ...
jsdialog 是一个简单的JavaScript对话框，弹出的对话框可拖动。 使用代码： functi...
Date.js 是一个开源的JavaScript库，用来解析、格式化和处理日期数据，支持多种语言...
共有 34 人关注 SlickGridjquery easyui datagrid 中 数据中某一列 进行两行或三行合并 如何实现_百度知道4623人阅读
Javascript（8）
前言：在前篇文章中，总结了SlickGrid 的基本方法，SlickGrid其功能扩展主要靠插件技术；这也是体现出作者Melibman 架构设计的优秀之处。本文列出了Master版本提供的插件以外，另外特意列出了在项目中添加的新的插件，供SlickGrid的开发人员参考(目前会在分支版本中提供，并未合并到SlickGrid的主版本中去)。
1. 基本插件列表
//列单元格嵌入编辑器
TextEditor
文本框编辑器,
IntegerEditor
数字编辑器
DateEditor
日期编辑器,
DropDownEditor
下拉框编辑器,
YesNoSelectEditor
YesNo选择器
CheckboxEditor
复选框编辑器
TextButtonEditor
文本框按钮编辑器,
PercentCompleteEditor
完成百分比编辑器
LongTextEditor
长文本编辑器
SelectCellEditor
单元格选中编辑器
//扩充插件
slick.autotooltips
自动提示插件
slick.cellcopymanager
单元格复制管理器
slick.cellrangedecorator
范围内单元格装饰
slick.cellrangeselector
范围单元格选择器
slick.cellselectionmodel
单元格选定模型
slick.checkboxselectcolumn
复选框列格式插件
slick.dropdownlistcolumn
下拉框格式插件
slick.headerbuttons
标题下拉按钮
slick.rowmovemanager
行移动管理器
slick.rowselectionmodel
行选择模型
2. & 插件注册及使用
2.1 &单元格嵌入编辑器
//在初始化列字段时候定义
var columnsProduct = [
{ id: &id&, name: &产品编号&, field:&ID&},
{ id: &ProductName&, name:&产品名称&, field:&ProductName&，editor:Slick.Editors.TextButton },
{ id: &UnitPrice&, name:&单价&, field:&UnitPrice&，editor: Slick.Editors.Text },
{ id: &IsLuxury&, name:&奢侈品?&, field:&IsLuxury&，editor:Slick.Editors.Checkbox, formatter:Slick.Formatters.Checkmark },
{ id: &ModifiedDate&, name:&修改日期&, field:&ModifiedDate&, fieldType: &datetime&, editor: Slick.Editors.Date },
{ id: &Notes&, name:&备注&, field:&Notes&, editor: Slick.Editors.LongText}
2.2 添加div等控件 Editors、formatter
//columns中加editor: Slick.Editors.Text 或者 加formatter:colFormatter
//字体描色
functioncolFormatter(row, cell, value, columnDef, dataContext) {
if(dataContext.iscol == true&& value!=&&) {
return&&div style='color: font-weight:'&&+ value +&&/div&&;
//formatter:colFormatter
//字体描色
functioncolFormatter(row, cell, value, columnDef, dataContext) {
if(dataContext.iscol == true&& value!=&&) {
return&&div style='color: font-weight:'&&+ value +&&/div&&;
2.3 &grid注册下拉框控件dropdownlist
varmtrPartJson = [];
//部位下拉框
functionaddMtrPartList() {
ajaxGet('/WebFramework/Sampric/BindMtrPart/','',function(result) {
if(result != null) {
mtrPartJson =
mtrPart = newSlick.DropDownListColumn({
id: &part&,name: &部位&, field:&part&,width: 82, dataSource: mtrPartJson
bomColumns.splice(4, 1,mtrPart.getColumnDefinition());
//注册部位下拉框
gridBom.registerPlugin(mtrPart);
//界面元素渲染后，绑定事件
$(&#slt_part&).bind(&change&,onItemChanged);
//部位下拉框改变Item、维护页弹出
varonItemChanged =function (e, args) {
if ($(this).val()==&-1&) {
alert(&弹出窗口，添加新选项...&);
$(&#slt_part&).append('&option value=10&My option&/option&');
//$(&.editor-select&).append('&optionvalue=10&My option&/option&');
var item = gridViewBom.getItemByIdx(selectedRowIndex);
item.part = $(this).val();
gridViewBom.updateItem(item.ID, item);
gridBom.updateRow(selectedRowIndex);
2.4 &注册复选框列
//添加复选框列
var checkboxProduct = new Slick.CheckboxSelectColumn({
cssClass: &slick-cell-checkboxsel&
columnsProduct.splice(0, 0,checkboxProduct.getColumnDefinition());
//注册复选框
gridProduct.registerPlugin(checkboxProduct);
2.5 注册标题下拉框
//注册HeaderMenu
var headerMenuPlugin = new Slick.Plugins.HeaderMenu({ &dataview&: dataViewProduct });
gridProduct.registerPlugin(headerMenuPlugin);
3. 扩展控件
3.1 扩展控件列表
slick.columnpicker
右键列选择器
slick.filter
过滤器方法封装
slick.filterdialog
过滤器对话框
slick.pager
客户端分页
slick.pagersvr
服务端分页
3.2 扩展控件使用
1）列右键选择器columnpicker
//列标题控件，排序及过滤
var columnpicker = new Slick.Controls.ColumnPicker(columnsProduct, gridProduct, dataViewProduct,optionsProduct);
columnpicker.onDataColumnSort.subscribe(onDataColumnPickerSortEvent);
2）分页控件pager
var rmtPageInfo = {};
rmtPageInfo.pageNum = 0;
rmtPageInfo.pageSize = 100;
rmtPageInfo.totalRowsCount =10000;
//先默认，后服务端计算返回
rmtPageInfo.totalPagesCount = 20;
//先默认，后服务端计算返回
//注册分页控件
var pager = newSlick.Controls.PagerSvr(dataViewProduct, gridProduct, rmtPageInfo, $(&#myPagerProduct&));
pager.onDataPaged.subscribe(onDataPagedEvent);
3）过滤器filter
//打开过滤器弹出框
var filterDialog = window.open('../scripts/slickgrid/controls/slick.filterdialog.html?colDefName=colDefEPProduct', 'myfilterdialog','height=500,width=600,left=150,top=100');
Web开发人员在熟知SlickGrid的基础架构和功能后，可以利用插件技术灵活实现自有业务需求的功能；此外，SlickGrid的各种特性在Melibman的主版本中持续开发完善，相信国内的开发人员也会逐渐了解SlickGrid，本文中提到的新插件都是为实际项目需求进行开发实现的，个别基础功能的插件在测试后，会在分支版本中发布出来。
QQ 交流群：（SlickUI企业级Web前端框架）
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：117340次
积分：1481
积分：1481
排名：第19995名
原创：22篇
转载：43篇
评论：56条
(2)(1)(2)(1)(1)(2)(1)(2)(1)(1)(1)(1)(1)(4)(2)(5)(1)(1)(2)(13)(6)(2)(8)(1)(1)(1)(1)查看: 5396|回复: 13
Grid某列某几行实现单元格合并+弹出窗体摆放，button事件问
该用户从未签到
本帖最后由 龙哥 于
02:07 编辑
（一）合并单元格
int i = 0, rowSpanNum = 1;
& && && && && & while (i & GridList.Rows.Count - 1)
& && && && && & {
& && && && && && &&&GridViewRow gvr = GridList.Rows;
& && && && && && &&&
& && && && && && &&&for (++i; i & GridList.Rows.C i++)
& && && && && && &&&{
& && && && && && && && &GridViewRow gvrNext = GridList.Rows;
& && && && && && && &
& && && && && && && && &if (gvr.Cells[0].Text == gvrNext.Cells[0].Text)
& && && && && && && && &{
& && && && && && && && && & gvrNext.Cells[0].Visible =
& && && && && && && && && & rowSpanNum++;
& && && && && && && && &}
& && && && && && && && &else
& && && && && && && && &{
& && && && && && && && && &
& && && && && && && && && & gvr.Cells[0].RowSpan = rowSpanN
& && && && && && && && && & rowSpanNum = 1;
& && && && && && && && && &
& && && && && && && && &}
& && && && && && && && &if (i == GridList.Rows.Count - 1)
& && && && && && && && &{
& && && && && && && && && & gvr.Cells[0].RowSpan = rowSpanN
& && && && && && && && &}
& && && && && && &&&}
& && && && && & }
相信论坛不少人知道这是gridview的合并单元代码，小弟不才，这次做项目想合并单元格，可是遇到grid控件没有cells属性，也没有百度到相关技术的文章，所以追根溯源来这里求助各位高手！
（二）父窗体创建弹出窗体
本人在grid所在父页面，设计器里（HTML）里拖了个window进去，然后放了自己想要的label和textbox，可是不知道如何才能让他们按我所想的放置在窗体内，现在的位置很难看！
（三）弹出窗体内的button按钮的Click事件 不触发
如题，click事件在前台注册完毕，可是并没有触发，此按钮是在window的toolbar里
该用户从未签到
我也遇到这样的问题 求解
该用户从未签到
＿放手ㄚi搏 发表于
我也遇到这样的问题 求解
刚遇到个，弹出窗体内的button按钮事件不能触发，兄弟是否懂得如何解决？
签到天数: 12 天[LV.3]偶尔看看II
是不是这个问题：
窗体的Target=Top只在EnableIFrame的情况下有效（这种情况其实是将Window的DOM节点渲染到父页面中）。
对于窗体中直接放置控件的情况，不能设置Target=Top或者Parent。我会在源代码中加上必要的注释。
=================
合并单元格在FineUI的Gird中无法实现，这和extjs的表格结构有关....
该用户从未签到
sanshi 发表于
是不是这个问题：/bbs/forum.php?mod=viewthread&tid=2095
窗体的Target=Top只在EnableI ...
老大，window里的button按钮事件不能触发是什么原因啊?
该用户从未签到
EnablePostBack=&true& 这个设置了吗
该用户从未签到
相同列合并能实现吗
该用户从未签到
龙哥 发表于
老大，window里的button按钮事件不能触发是什么原因啊?
我是新手程序员，刚接触extaspnet就迷上了，其实我做了一遍asp.net的页面，可是心里不甘又尝试extaspnet，最终今天成功了，很高兴，美中不足的是没实现类似单元格合并的效果，老大可否给个解决方案！
该用户从未签到
＿放手ㄚi搏 发表于
相同列合并能实现吗
谢谢兄弟了，我觉得不是这个属性的问题，后来我用了老大的demo，拷贝过去又行了
该用户从未签到
sanshi 发表于
是不是这个问题：/bbs/forum.php?mod=viewthread&tid=2095
窗体的Target=Top只在EnableI ...
另外，老大您这个论坛带有宽屏，窄屏的切换。正好在下开发过一个asp.net网站，当时没有做任何宽屏的设计，老大你的这个功能可否直接使用在老的窄屏网站项目里呢！
站长推荐 /2
客户端 JS 库仅 200K；下载流量减少 70%；内存占用减少 50%；速度提升 3 倍以上（无缓存）
现在就打开微信，扫描二维码关注 FineUI 公众号，三石期待您的加入！
扫描二维码，关注 FineUI 微信公众号
Powered by