react easyui datagrid/treegrid的几个问题

最新推荐文章于 2024-09-25 07:25:33 发布

原创最新推荐文章于 2024-09-25 07:25:33 发布 · 813 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端 #javascript #react.js

Javascript 同时被 2 个专栏收录

39 篇文章

订阅专栏

delphi多语言套件

21 篇文章

订阅专栏

本文探讨了在使用EasyUI的React版本时，如何有效地添加列和插入新行的问题。作者分享了调整column的方法，以及尝试解决新增行后焦点定位的技巧，为遇到同样困扰的开发者提供了解决方案。

easyui的react版本比较难用。

1.如何增加column?

    ...........
    render(){
      //字段标题需要用当前语言翻译，不能写在render外部
      let columns=aFields.map((field)=>{
        return <GridColumn key={field} field={field} title={t(field)} 
          rowspan={(field=='DisplayValue')?1:2} 
          colspan={(field=='DisplayValue')?aLCIDs.length:1}
          editable={true}
          sortable={(field=='DisplayValue')?false:true}
          editor={({ row }) => ((field=='SortNumber'||field=='SeqNo')?
            <NumberBox value={row[field]} precision={0}></NumberBox>:
            <TextBox value={row[field]}></TextBox>
          )}
          width={fieldWidth[field]}>
        </GridColumn>
      });
      let LCIDColumns=aLCIDs.map((field)=>{
        return <GridColumn key={field} field={field} sortable={true}
          editable={true}
          title={t(field)}>
        </GridColumn>
      });
      return (
          <div>
            <div>{t('Data Dictionary Editor')}</div>
            <div className="dialog-button">
              <LinkButton className="c1" onClick={this.s2t}>{t('s2t')}</LinkButton>
              <LinkButton onClick={this.t2s}>{t('t2s')}</LinkButton>
              <LinkButton iconCls="icon-add" onClick={this.askAddLCID}>Add Language</LinkButton>
              <LinkButton iconCls="icon-add" onClick={this.appendRow}>Append Row</LinkButton>
            </div>
            <div>
                <TreeGrid data={this.state.data} idField="DDKey" treeField="DDKey" 
                  ref={this.tree}
                  pagination={true} filterable={true} editMode="cell" clickToEdit={true}
                  onFilterChange={this.onFilterChange}
                  onRowSelect={this.onRowSelect}
                >
                  <GridColumnGroup>
                    <GridHeaderRow>
                      <GridColumn align="center" filterable={false} width={40}
                        cellCss="datagrid-td-rownumber" rowspan={2} sortable={false}
                        render={({rowIndex}) => (
                          <span>{rowIndex+1}</span>
                        )}
                      />
                      {columns}
                    </GridHeaderRow>
                    <GridHeaderRow>
                      {LCIDColumns}
                    </GridHeaderRow>
                  </GridColumnGroup>
                </TreeGrid>
            </div>
            <ComSelectLCID ref={this.dialog_selectLCID} onOK={this.doAddLCID} title='add one language'></ComSelectLCID>
          </div>
      )
    }
    ..........
    doAddLCID(LCID){
      console.log(this.tree.current);
      aLCIDs.push(333);
      this.forceUpdate();
      this.tree.current.forceUpdate();
    }

column是增加了，但是filter面板和资料区都没有刷新，不行。

easyui文档不全面，通过console debug找到个changeColumns函数，改为：

    doAddLCID(LCID){
      console.log(this.tree.current);
      aLCIDs.push(333);
      this.forceUpdate();
      this.tree.current.changeColumns();
    }

ok，显示正常。

2.如何新增row?选中新增的row，聚焦到新增的row光标闪烁。

    appendRow(){
      this.state.data.push({});
      this.tree.current.setData(this.state.data);
      //this.tree.current.forceUpdate();
      //如何显示新增的这行？切换到最后一页
      this.tree.current.setState({pageNumber:1000});
      //this.tree.current.navRow({});
      this.tree.current.selectRow({});
      //this.tree.current.scrollTop({});
      //如何焦点落在新增的这行，光标闪烁
      this.tree.current.doEnter();
      this.tree.current.beginEdit({},this.tree.current.state.centerColumns[1]);
    }