找回密码
 立即注册

QQ登录

只需一步,快速开始

yaochenglong

高级会员

19

主题

68

帖子

1745

积分

高级会员

积分
1745

活字格认证

yaochenglong
高级会员   /  发表于:2015-10-22 16:08  /   查看:7709  /  回复:3
你好,Alice,
               代码如下,看注释部分和html变量
  1. <!DOCTYPE HTML>
  2. <!-- saved from url=(0064)[url]http://wijmo.com/wp-content/uploads/2015/09/CustomEditor_JS.html[/url] -->
  3. <!DOCTYPE html PUBLIC "" ""><HTML
  4. xmlns="http://www.w3.org/1999/xhtml"><HEAD><META content="IE=11.0000"
  5. http-equiv="X-UA-Compatible">
  6.      <TITLE></TITLE>     
  7. <META http-equiv="Content-Type" content="text/html; charset=utf-8"><!--jQuery References-->
  8.    
  9. <SCRIPT src="CustomEditor_JS.files/jquery-1.11.1.min.js" type="text/javascript"></SCRIPT>
  10.      <!-- Wijmo references (required) -->     
  11. <SCRIPT src="CustomEditor_JS.files/wijmo.min.js" type="text/javascript"></SCRIPT>
  12.      <LINK href="CustomEditor_JS.files/wijmo.min.css" rel="stylesheet" type="text/css">
  13.     <!-- Wijmo controls (optional, include the controls you need) -->     
  14. <SCRIPT src="CustomEditor_JS.files/wijmo.grid.min.js" type="text/javascript"></SCRIPT>
  15.      
  16. <SCRIPT src="CustomEditor_JS.files/wijmo.input.min.js" type="text/javascript"></SCRIPT>
  17.      
  18. <SCRIPT type="text/javascript">
  19.         var editIndex = -1;
  20.         var inputDate, acolindex;
  21.      

  22.         // get matches for a search term
  23.         function getData(count, unique) {
  24.             var data = [];
  25.             var dt = new Date();

  26.             // add count items
  27.             for (var i = 0; i < count; i++) {

  28.                 // constants used to create data items
  29.                 var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60);


  30.                 // create the item
  31.                 data.push({
  32.                     id: i,
  33.                     date: date,
  34.                     buttons: ""
  35.                 });
  36.             }
  37.             return data;
  38.         }


  39.         function itemFormatter(panel, r, c, cell) {
  40.             if (panel.cellType == wijmo.grid.CellType.Cell) {
  41.                 var col = panel.columns[c],
  42.                     html = cell.innerHTML;
  43.                 if (r == editIndex) {
  44.                     switch (col.name) {
  45.                         case 'buttons':
  46.                             html = '<div>' +
  47.                                    '&amp;nbsp;&amp;nbsp;' +
  48.                                    '<button class="btn btn-primary btn-sm" onclick="commitRow(' + r + ')">' +
  49.                                        '<span class="glyphicon glyphicon-ok"></span> OK' +
  50.                                    '</button>' +
  51.                                '</div>';
  52.                             break;
  53.                         case 'date':
  54.                             acolindex = c;
  55.                             html = '<input id="theDate" />';
  56.                             setTimeout(function () {
  57.                                 $("#theDate").keydown(function (args) {
  58.                                     if (args.which == 9) {
  59.                                         // find the cell from its bounding rectangle
  60.                                         var rc = flex.getCellBoundingRect(r, 2);
  61.                                         var cell = document.elementFromPoint(rc.left + rc.width / 2, rc.top + rc.height / 2);

  62.                                         // make sure this is a regular cell (not a header)
  63.                                         if (wijmo.hasClass(cell, 'wj-header')) {
  64.                                             cell = null;
  65.                                         }

  66.                                         // make sure this is not an element within a cell
  67.                                         while (cell &amp;&amp; !wijmo.hasClass(cell, 'wj-cell')) {
  68.                                             cell = cell.parentElement;
  69.                                         }
  70.                                         cell.childNodes[0].focus();
  71.                                     }
  72.                                 });
  73.                             }, 20);
  74.                             break;
  75.                     }
  76.                 } else {
  77.                     switch (col.name) {
  78.                         case 'buttons':
  79.                             cell.style.padding = '3px';
  80.                             //此处需要拿到隐藏的属性id的值
  81.                             html = '<div>' +
  82.                                    '&amp;nbsp;&amp;nbsp;' +
  83.                                    '<button class="btn btn-default btn-sm" onclick="editRow(' + id字段的值 + ')">' +
  84.                                        '<span class="glyphicon glyphicon-pencil"></span> Edit' +
  85.                                    '</button>' +
  86.                                '</div>';
  87.                             break;
  88.                     }
  89.                 }

  90.                 if (html != cell.innerHTML) {
  91.                     cell.innerHTML = html;
  92.                     if (col.name == "date") {
  93.                         inputDate = new wijmo.input.InputDate("#theDate");
  94.                         inputDate.value = new Date(panel.getCellData(r, c, true));
  95.                     }
  96.                     cell.style.padding = '3px';
  97.                 }
  98.             }
  99.         }

  100.         function editRow(row) {
  101.             editIndex = row;
  102.             flex.invalidate();
  103.         }

  104.         function commitRow(row) {

  105.             // save changes
  106.             flex.setCellData(row, 'date', inputDate.value);

  107.             // done editing
  108.             cancelRow(row);

  109.             //Get the updated values in collection view.
  110.             var cv = flex.collectionView;
  111.         }
  112.         function cancelRow(row) {
  113.             editIndex = -1;
  114.             flex.invalidate();
  115.         }
  116.         var flex;
  117.         $(document).ready(function () {
  118.             flex = new wijmo.grid.FlexGrid("#flexgrid");
  119.             flex.initialize({
  120.                 autoGenerateColumns: false,
  121.                 //selectionMode: "None",
  122.                 itemsSource: getData(10),
  123.                 columns: [
  124.                     { header: 'ID', name: "id", binding: 'id', width: '*',visible:false },
  125.                     { header: 'Date', name: "date", binding: 'date', width: '*' },
  126.                     { header: 'Buttons', binding: "buttons", name: "buttons", width: '*' }],
  127.                 isReadOnly: true,
  128.                 itemFormatter: itemFormatter
  129.             });
  130.         });
  131.     </SCRIPT>

  132. <META name="GENERATOR" content="MSHTML 11.00.9600.17416"></HEAD>
  133. <BODY>
  134. <DIV id="flexgrid"></DIV></BODY></HTML>
复制代码

3 个回复

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

感谢对该问题的反馈。
您通过panel.getCellData(r, c, true)就可以拿到当前单元格的值,而通过panel.getCellData(r, &quot;id&quot;, true),就可以拿到本行的id列的值。

评分

参与人数 1满意度 +5 收起 理由
rbgongming + 5 @_@

查看全部评分

请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
yaochenglong
高级会员   /  发表于:2015-10-22 20:05:00
板凳
已经拿到值了,okay了!
回复 使用道具 举报
Alice
社区贡献组   /  发表于:2015-10-23 09:36:00
地板
回复 3楼yaochenglong的帖子

好的,谢谢反馈。

您可以关注我们的微信服务号(微信号:GrapeCityDT),帖子有回复时可即时收到提醒,便于您第一时间查看,尽快解决技术问题。关注即可获得300金币用于兑换礼品。
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部