Фильтрация списка SP по значению столбца в другом списке SP. SPFX - PullRequest
Новая
       3

Фильтрация списка SP по значению столбца в другом списке SP. SPFX

0 голосов
/ 13 февраля 2020

Я создаю веб-часть, показывающую 2 списка. Список A (Источник) и Список B (Будет отфильтровано). Мне нужно отфильтровать список B на основе того, что выбрано в списке A. Поэтому, если пользователь щелкнет элемент 1 в списке A, отобразятся все связанные элементы списка B. Реляционный столбец между каждым списком в приведенном ниже коде:

Список A: RelatedItems - в нем есть текстовый столбец из одной строки, в котором перечислены все элементы в B , связанные к этому одному элементу.

Список B: MasterItem - в нем есть текстовый столбец из одной строки, содержащий идентификатор элемента master .

2 списки: 

private _onRenderListA(item: IListAItem) {

    return (

      <div>

        <tr>
          <td style={{ width: '80px' }}>{item.Id}</td>
          <td style={{ width: '250px' }}>{item.Title}</td>
          <td style={{ width: '200px' }}>{item.RelatedItems}</td>
          <td style={{ width: '15px' }}>
            <div className={styles.editIcon}><Icon iconName="Filter" id={item.Id.toString()} onClick={this._editItem} />
            </div>
          </td>
        </tr>

      </div>
    );
  }

  private _onRenderListB(item: IListBItem) {

    return (

      <div>

        <tr>
          <td style={{ width: '80px' }}>{item.Id}</td>
          <td style={{ width: '250px' }}>{item.Title}</td>
          <td style={{ width: '200px' }}>{item.MasterItem}</td>    

        </tr>

      </div>
    );
  }

Функция для получения элементов из SP: 

public _getListItems() {
    sp.web.lists.getByTitle("ListA").items.get().then((items: any[]) => {
      let returnedItems: IListAItem[] = items.map((item) => { return new ListAItem(item); });

      this.setState({ 
        Items: returnedItems,
        ListAItems: returnedItems,

      });
    });
    sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => {
      let returnedItems: IListBItem[] = items.map((item) => { return new ListBItem(item); });

      this.setState({ 

        ListBItems: returnedItems,
      });
    });

  }

и функция для нажимаемой кнопки рядом с каждым элементом в списке A: 

private _editItem = (ev: React.MouseEvent<HTMLElement>) => {

    const sid = Number(ev.currentTarget.id);
   console.log(this.state.ListBItems);
    let _item = this.state.ListBItems.filter((item) => { return item.Id === sid; });
    if (_item && _item.length > 0) {

      this.setState({

        Id: sid,
       ListBItems: _item

      }, () => {
        console.log(_item);
        console.log(this.state.Items);
        console.log(this.state.ListBItems);
      });
    }
  }

Когда я нажимаю на элемент в списке A, он фильтрует список B, чтобы соответствовать Id, но я хочу, чтобы он фильтровал список B, используя значения либо в столбце MasterItem списка B, либо из RelatedItems. * 1026 списка A. *

Если бы я мог изменить

let _item = this.state.ListBItems.filter((item) => { return item.Id === sid; });

на:

let _item = this.state.ListBItems.filter((item) => { return item.MasterItem === sid; });, тогда я думаю, что это может сработать, но я пробовал это, и это не ничего не вернуть.

ОБНОВЛЕНИЕ:

Я думаю, что с помощью этого: 

 private _editItem = (ev: React.MouseEvent<HTMLElement>) => {

    const sid = Number(ev.currentTarget.id);
   console.log(this.state.ListBItems);
    let _item = this.state.ListBItems.filter((item) => { return item.Id === sid; });

    if (_item && _item.length > 0) {

      sp.web.lists.getByTitle("ListB").items.get().then((items: any[]) => {
        let returnedItems: IListBItem[] = items.map((item) => { return new ListBItem(item); });

        this.setState({      
          ListBItems: returnedItems,
        });
      });

    }
  }

и с помощью _item в фильтре () на карте (), Я немного хрень с бази c javscript logi c хоть какая нибудь помощь?

...