请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

yaochenglong

高级会员

19

主题

68

帖子

1745

积分

高级会员

积分
1745

活字格认证

yaochenglong
高级会员   /  发表于:2015-10-13 10:34  /   查看:14220  /  回复: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;

  13. }
  14. }
  15.                            
复制代码
请点击评分,对我的服务做出评价!  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,我写的代码没有没有执行成功,按钮没有显示出来,麻烦看下是哪里的问题!

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

  59.                                  };
  60.                           
  61.                             var col = addBookRoomFlexGrid.columns.getColumn('roomtypeId');
  62.                                 col.dataMap = new wijmo.grid.DataMap(msg.attributes.roomTypeList, 'codeId', 'codeNamec');
  63.                                
  64.                   
复制代码
回复 使用道具 举报
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下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部