找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › WijmoJS专区 › 求助中心 › 查看内容
发新帖

yaochenglong

高级会员

19

主题

68

帖子

1745

积分

高级会员

积分
1745

活字格认证

最新发帖

如何在FlexGrid初始化的时候就显示行内的按钮

yaochenglong
高级会员   /  发表于：2015-10-13 10:34  /   查看：15598  /  回复：21
function createEditor(editColumn) {
            var grid = editColumn.grid;

            grid.formatItem.addHandler(function (s, e) {
                var editRange = grid.editRange,
                    column = e.panel.columns[e.col];
                // check whether this is an editing cell of the wanted column
                if (!(e.panel.cellType === wijmo.grid.CellType.Cell && column === editColumn && editRange && editRange.row === e.row && editRange.col === e.col)) {
                    return;
                }

                // hide standard editor (don't remove!)
                if (e.cell.firstChild) {
                    e.cell.firstChild.style.display = 'none';
                }

                // add custom editor
                var editorRoot = document.createElement('div');
                var button;
                var input;
                if (column.dataType === wijmo.DataType.Date) {
                    input = new wijmo.input.InputDate(editorRoot);
                } else if (column.binding == "状态") {
                    // as an ICollectionView
                    var countries = ['已修改','未修改'];
                    var combobox = new wijmo.input.ComboBox(editorRoot, {
                        itemsSource: countries,
                    });
                    input = combobox;
                }else if(column.binding == "操作"){



如果在FlexGrid初始化的时候就显示操作列的按钮，而不是在双击进入编辑模式的时候显示？

21 个回复

倒序浏览
Alice
社区贡献组   /  发表于：2015-10-13 11:00:00
沙发
回复 1楼yaochenglong的帖子

谢谢你的反馈。
也是在itemForatter事件里设置。
可以在javascript里，设置Dom元素的innerHTML。将innerHTML里放置一个button。HTML页面的DOM的innerHTML的知识，我从网上找了相关资料，供你参考：
http://www.w3school.com.cn/jsref/prop_tablerow_innerhtml.asp
基本逻辑代码参考：
  1. if (panel.cellType == wijmo.grid.CellType.Cell) {
  2.                 var col = panel.columns[c],
  3.                     html = cell.innerHTML;
  4.                          if(col.name=='buttons') {
  5.                                      html = '<div>' +
  6.                                    '&amp;nbsp;&amp;nbsp;' +
  7.                                    '<button class="btn btn-primary btn-sm" onclick="commitRow(' + r + ')">' +
  8.                                        '<span class="glyphicon glyphicon-ok"></span> OK' +
  9.                                    '</button>' +
  10.                                    '&amp;nbsp;&amp;nbsp;' +
  11.                                '</div>';
  12. cell.innerHTML = html;

  14. }
  15. }
  16.                            
复制代码
请点击评分，对我的服务做出评价！  5分为非常满意！

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
yaochenglong
高级会员   /  发表于：2015-10-13 17:09:00
板凳
你的那个buttons   也就是if(col.name=='buttons')   里面的buttons ，是

columns: [
                            { header: '序号', width:50,isReadOnly:true},
                            { header: '房类',binding:&quot;roomtypeId&quot;,width:'*' },
                            { header: '订房数', binding:&quot;bookNum&quot;,width:'*' },
                            { header: '留房数', binding:&quot;saveNum&quot;,isReadOnly:true,width:'*'},
                            { header: '抵店日期',binding:&quot;reachDate&quot;, width:'*'},
                            { header: '离店日期',binding:&quot;leaveDate&quot;, width:'*'},
                            { header: '抵店时间', width:'*'},
                            { header: '房价',binding:&quot;roomPrice&quot;, width:'*'},
                            { header: '抵达数',binding:&quot;reachNum&quot;, width:'*'},
                            { header: '操作', binding:&quot;buttons&quot;,width:'*'},
                   ],


columns的最后一列，是绑定一个buttons,但是这个buttons  是CollectionView的数据源不存在的吗？
我仿照你给的代码，效果没有出来！
回复 使用道具 举报
Alice
社区贡献组   /  发表于：2015-10-13 17:44:00
地板
回复 3楼yaochenglong的帖子

那句代码的col.name=='buttons'是列名。我并不知道你的列名是什么，就做了模拟。
你的代码中并没有给列设置列名，所以不会执行itemFormatter的代码。

按钮button的列的name是buttons，请参考：
  1. { header: 'Buttons', binding: &quot;buttons&quot;, name: &quot;buttons&quot;, width: '*' }],
复制代码

通过binding属性绑定了数据源里的一个叫做buttons的字段，这个字段的值设置为空即可。
请参考：
  1. //数据源data设置值
  2. var data = [];
  3. data.push({
  4.         //此处省略其他字段的设置
  5.        //......
  6.                     buttons: &quot;&quot;
  7.                 });
复制代码
请点击评分，对我的服务做出评价！  5分为非常满意！

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
yaochenglong
高级会员   /  发表于：2015-10-13 18:08:00
5#
那如果我直接讲返回的json当成data传入CollectionView，是不是需要重新构造数据结构，添加一个空的字段buttons?
回复 使用道具 举报
Alice
社区贡献组   /  发表于：2015-10-14 09:34:00
6#
回复 5楼yaochenglong的帖子

是的，正如你所说。
请点击评分，对我的服务做出评价！  5分为非常满意！

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
yaochenglong
高级会员   /  发表于：2015-10-19 15:40:00
7#
你好Alice：
              我这里有这么一个需求，就是初始化的时候是没有数据的，但是默认第一行的操作列里要有一个按钮,并且每个按钮的value绑定的是当前行的默认ID，我写的代码没有没有执行成功，按钮没有显示出来，麻烦看下是哪里的问题！

  2.                            var viewArray = [];
  3.                            for(var i=0;i<msg.attributes.list.length;i++){
  4.                                    appData.push({
  5.                                            id:msg.attributes.list[i][id],
  6.                                            roomtypeId:msg.attributes.list[i][roomtypeId],
  7.                                            bookNum:msg.attributes.list[i][bookNum],
  8.                                            saveNum:msg.attributes.list[i][saveNum],
  9.                                            reachDate:msg.attributes.list[i][reachDate],
  10.                                            leaveDate:msg.attributes.list[i][leaveDate],
  11.                                            roomPrice:msg.attributes.list[i][roomPrice],
  12.                                            reachNum:msg.attributes.list[i][reachNum],
  13.                                            buttons:""
  14.                                    });
  15.                            }
  16.                            //addBookRoomView = new wijmo.collections.CollectionView(msg.attributes.list);
  17.                            addBookRoomView = new wijmo.collections.CollectionView(viewArray);
  18.                            addBookRoomFlexGrid = new wijmo.grid.FlexGrid('#div_bookRoom', {
  19.                              autoGenerateColumns: false,
  20.                              allowMerging : wijmo.grid.AllowMerging.All,
  21.                              isReadOnly :  false,
  22.                              selectionMode : wijmo.grid.SelectionMode.Row,
  23.                              allowAddNew:true,
  24.                              columns: [
  25.                                  { header: '主键',binding:"id", width:50,isReadOnly:true,visible:false},      
  26.                             { header: '序号', width:50,isReadOnly:true},
  27.                             { header: '房类',binding:"roomtypeId",width:'*' },
  28.                             { header: '订房数', binding:"bookNum",width:'*' },
  29.                             { header: '留房数', binding:"saveNum",width:'*'},
  30.                             { header: '抵店日期',binding:"reachDate", width:'*'},
  31.                             { header: '离店日期',binding:"leaveDate", width:'*'},
  32.                             { header: '抵店时间', width:'*'},
  33.                             { header: '房价',binding:"roomPrice", width:'*'},
  34.                             { header: '抵达数',binding:"reachNum", width:'*'},
  35.                             { header: '操作', binding:"buttons",width:'*'},
  36.                    ],
  37.                    itemsSource: addBookRoomView,
  38.                                    });
  39.                           
  40.                            addBookRoomView.trackChanges = true;
  41.                            addBookRoomFlexGrid.itemFormatter = function(panel, r, c, cell) {
  42.                                    /*if (r>=0 &amp;&amp; panel.columns[c]._hdr == "操作") {
  43.                                        cell.innerHTML = '<input type="button" name="" value="留房'+1+'">';
  44.                                    }*/
  45.                                    if (panel.cellType == wijmo.grid.CellType.Cell) {
  46.                                 var col = panel.columns[c],
  47.                                     html = cell.innerHTML;
  48.                                          if(col.name=='buttons') {
  49.                                                      html = '<div>' +
  50.                                                    '&amp;nbsp;&amp;nbsp;' +
  51.                                                    '<button class="btn btn-primary btn-sm" onclick="commitRow(' + r + ')">' +
  52.                                                        '<span class="glyphicon glyphicon-ok"></span> OK' +
  53.                                                    '</button>' +
  54.                                                    '&amp;nbsp;&amp;nbsp;' +
  55.                                                '</div>';
  56.                                                                   cell.innerHTML = html;
  57.                                                
  58.                                                                 }
  59.                                         }

  61.                                  };
  62.                           
  63.                             var col = addBookRoomFlexGrid.columns.getColumn('roomtypeId');
  64.                                 col.dataMap = new wijmo.grid.DataMap(msg.attributes.roomTypeList, 'codeId', 'codeNamec');
  65.                                
  66.                   
复制代码
回复 使用道具 举报
Alice
社区贡献组   /  发表于：2015-10-19 16:19:00
8#
回复 7楼yaochenglong的帖子

你的代码已经收到，我们需要针对你的代码做测试，测试后给你反馈。
请点击评分，对我的服务做出评价！  5分为非常满意！

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
yaochenglong
高级会员   /  发表于：2015-10-19 16:24:00
9#
好的！
回复 使用道具 举报
Alice
社区贡献组   /  发表于：2015-10-20 10:36:00
10#
回复 9楼yaochenglong的帖子

根据您的代码没有重现问题i，我会根据您的代码模拟场景做个示例发给您参考。
请点击评分，对我的服务做出评价！  5分为非常满意！

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
下一页 »
123下一页
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部