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

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初始化的时候就显示操作列的按钮，而不是在双击进入编辑模式的时候显示？

回复 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;
    
13. 
    
14. }
    
15. }
    
16.                            

复制代码

你的那个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的数据源不存在的吗？
我仿照你给的代码，效果没有出来！

回复 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.                 });

复制代码

那如果我直接讲返回的json当成data传入CollectionView，是不是需要重新构造数据结构，添加一个空的字段buttons?

回复 5楼yaochenglong的帖子

是的，正如你所说。

你好Alice：
              我这里有这么一个需求，就是初始化的时候是没有数据的，但是默认第一行的操作列里要有一个按钮,并且每个按钮的value绑定的是当前行的默认ID，我写的代码没有没有执行成功，按钮没有显示出来，麻烦看下是哪里的问题！

1. 
   
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.                                         }
    
60. 
    
61.                                  };
    
62.                           
    
63.                             var col = addBookRoomFlexGrid.columns.getColumn('roomtypeId');
    
64.                                 col.dataMap = new wijmo.grid.DataMap(msg.attributes.roomTypeList, 'codeId', 'codeNamec');
    
65.                                
    
66.                   

复制代码

回复 7楼yaochenglong的帖子

你的代码已经收到，我们需要针对你的代码做测试，测试后给你反馈。

好的！

回复 9楼yaochenglong的帖子

根据您的代码没有重现问题i，我会根据您的代码模拟场景做个示例发给您参考。