LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hubin616(彬 胡)

lwcでソート及び検索機能を持つテーブル作成

Last updated at Posted at 2022-12-14

この記事ではlwcで作成する標準な一覧表示するテーブルに昇順降順する機能に加え検索欄に入力内容を表示内容から絞り込みする機能を加えるコードのサンプルを記載するものとなります。詳しい解説は後ほど加えます。

1.コードサンプル

tanakoDtable.html
<template>
    <lightning-card   
        icon-name="custom:custom66"
    >
        <h1 slot="title" style="font-size:14px">店子管理（{recCount}/{totalCount}）</h1>
        <div slot="actions">
                <div class="slds-form_horizontal slds-form slds-grid slds-wrap">
                    <lightning-input type="search" 
                    label="" 
                    placeholder="フリーワード" 
                    value={keyword} 
                    onchange={handleSearchMem} 
                    onkeydown={handleSearchDB}>
                </lightning-input>
            </div>
            <div style="font-size:12px">
                検索可能項目：シーケンス番号/店舗名
            </div>
            </div>
        <div class="slds-scrollable_y" style="height:10rem">
            <template if:true={results}>
                <lightning-datatable
                    key-field="Sequence_Number__c"
                    data={data}
                    columns={columns}
                    sorted-by={sortedBy}
                    sorted-direction={sortedDirection}
                    onsort={sortColumns}
                    show-row-number-column
                >
                </lightning-datatable>
            </template>
        </div>
    </lightning-card>
</template>
tanakoDtable.js
import { LightningElement,api, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import commonSelectRecords from '@salesforce/apex/CommonDmlUtil.commonSelectRecords';

const COLS = [
    { label: 'シーケンス番号', fieldName: 'LinkValue',type: 'url',
    typeAttributes: {label: { fieldName: 'Sequence_Number__c' }},sortable: true},
    { label: 'GW店舗番号', fieldName: 'GW_Store_Number__c'},
    { label: '店舗名', fieldName: 'STORE_NAME__c'},
    { label: '共通ID', fieldName: 'CommonId__c'},
    { label: 'VM審査結果', fieldName: 'VM_Examination_Result__c'},
    { label: '会社名', fieldName: 'Company_Name__c' },    
    { label: 'ショップコード', fieldName: 'Shop_Code__c' }  
];

export default class TanakoDtable extends LightningElement {
    columns = COLS;
    @api recordId; // parent id
    sortedDirection = 'asc';
    sortedBy = 'Name';
    results;
    data;
    recCount = 0;
    totalCount=0;
    keyword = '';
    sort='';

    connectedCallback(){
        //exec
        
        if(this.sortedDirection==='asc'){
            this.sort='ASC';
        }else{
            this.sort='DESC'
        }
        var sql = 'Select '
            + ' Id,Sequence_Number__c,GW_Store_Number__c,'
            + ' STORE_NAME__c,'
            + ' CommonId__c,'
            + ' VM_Examination_Result__c,'
            + ' Company_Name__c'
            + ' From TanakoManagement__c'
            + " Where Contact__r.AccountId = '" +this.recordId +"'"
            + " order by Sequence_Number__c "+this.sort+" limit 5";
            console.log('test 1 sql>' + sql);
            commonSelectRecords({strSql: sql })
            .then(result => {
            //console.log('test 1 result>' + result);
            //this.results = result;
                
            // var a  = JSON.parse(JSON.stringify(this.results));
                var arr = [];
            
                for (var i = 0; i < result.length; i++) {
                    console.log('1.5)'+(JSON.stringify(result[i])));
                    var rec = {};
                    var key = Object.keys(result[i]);
                    for( var j = 0; j < key.length; j++ ) {
                        console.log('key )'+ key[j] + ' -- ' + result[i][key[j]]);
                        rec[ key[j] ] = result[i][ key[j] ];
                        if(key[j]=='Account'){
                            rec['Account.Name'] =  result[i][ key[j] ].Name;
                        }
                    }
                    rec['LinkValue'] = '/' + result[i].Id;
                    arr.push(rec);
                 }
                 this.results =  arr;
                 this.data = arr;
                 this.recCount = arr.length;
                 console.log('2)'+JSON.stringify(this.results ));
            })
            .catch(error => {
                /*eslint no-console: "off"*/
                console.log(error);
                this.result = error;
                this.dispatchEvent( new ShowToastEvent({
                    title: '処理結果',
                    message: 'レコード取得が失敗しました。\n' + error.body.message,
                    variant: 'error',
                    mode: 'dismissable'
                }));
            })
            var sql2 = 'Select '
                + ' Count(Id)'
                + ' From TanakoManagement__c'
                + " Where Contact__r.AccountId = '" +this.recordId +"'";
               
                console.log('test 1 sql>' + sql2);
                commonSelectRecords({strSql: sql2 })
                .then(result => {
                    var arr = [];
            
                for (var i = 0; i < result.length; i++) {
                    console.log('1.5)'+(JSON.stringify(result[i])));
                    var rec = {};
                    var key = Object.keys(result[i]);
                    for( var j = 0; j < key.length; j++ ) {
                        console.log('key )'+ key[j] + ' -- ' + result[i][key[j]]);
                        rec[ key[j] ] = result[i][ key[j] ];
                        if(key[j]=='Account'){
                            rec['Account.Name'] =  result[i][ key[j] ].Name;
                        }
                    }
                    arr.push(rec);
                 }
                 this.results =  arr;
                 this.totalCount=arr[0].expr0;
                 console.log('3)'+JSON.stringify(this.results ));
                 console.log('3.5)'+JSON.stringify(this.totalCount ));
                })
                .catch(error => {
                    /*eslint no-console: "off"*/
                    console.log(error);
                    this.result = error;
                    this.dispatchEvent( new ShowToastEvent({
                        title: '処理結果',
                        message: 'レコード取得が失敗しました。\n' + error.body.message,
                        variant: 'error',
                        mode: 'dismissable'
                    }));
                })

    
        }
        sortColumns( event ) {
            this.sortedBy = event.detail.fieldName;
            
            this.sortedDirection = event.detail.sortDirection;
            if(this.sortedDirection==='asc'){
                this.sort='ASC';
            }else{
                this.sort='DESC'
            }
            var sql = 'Select '
                + ' Id, Sequence_Number__c,GW_Store_Number__c,'
                + ' STORE_NAME__c,'
                + ' CommonId__c,'
                + ' VM_Examination_Result__c,'
                + ' Company_Name__c'
                + ' From TanakoManagement__c'
                + " Where Contact__r.AccountId = '" +this.recordId +"'"
                + " order by Sequence_Number__c "+this.sort+" limit 5";
                console.log('test 1 sql>' + sql);
                commonSelectRecords({strSql: sql })
                .then(result => {
                    //console.log('test 1 result>' + result);
                   //this.results = result;
                    
                   // var a  = JSON.parse(JSON.stringify(this.results));
                    var arr = [];
                
                    for (var i = 0; i < result.length; i++) {
                        console.log('1.5)'+(JSON.stringify(result[i])));
                        var rec = {};
                        var key = Object.keys(result[i]);
                        for( var j = 0; j < key.length; j++ ) {
                            console.log('key )'+ key[j] + ' -- ' + result[i][key[j]]);
                            rec[ key[j] ] = result[i][ key[j] ];
                            if(key[j]=='Account'){
                                rec['Account.Name'] =  result[i][ key[j] ].Name;
                            }
                        }
                        rec['LinkValue'] = '/' + result[i].Id;
                        arr.push(rec);
                     }
                     this.results =  arr;
                     this.data = arr;
                     this.recCount = arr.length;
                     console.log('2)'+JSON.stringify(this.results ));
                })
                .catch(error => {
                    /*eslint no-console: "off"*/
                    console.log(error);
                    this.result = error;
                    this.dispatchEvent( new ShowToastEvent({
                        title: '処理結果',
                        message: 'レコード取得が失敗しました。\n' + error.body.message,
                        variant: 'error',
                        mode: 'dismissable'
                    }));
                })

            var reverse = this.sortedDirection !== 'asc';
            
            let arr = this.results;
            console.log('data -- ' + JSON.stringify(arr[0]));
            arr.sort(this.sortBy(this.sortedBy, reverse))
            this.data = [...arr];
            
            //return this.results;
        }    

        sortBy(fieldname, reverse, primer) {
            
            var key = primer ?
                function(x) {return primer(x[fieldname])} :
                function(x) {return x[fieldname]};
                reverse = !reverse ? 1 : -1;
            return function (a, b) {
                return a = key(a)?key(a):'', b = key(b)?key(b):'', reverse * ((a > b) - (b > a));
            }
            
        }

        handleSearchMem(event) {
            
            this.keyword = event.target.value;
            var term = this.keyword;
            var arr = this.results;
            console.log('term >' + term);
            var regex = new RegExp(term, "i");
            try {
                //console.log('arr: ' + JSON.stringify(arr));
                var tmpData = arr.filter(row=>regex.test(row['Sequence_Number__c'])
                            || regex.test(row['STORE_NAME__c'])
                    
                            );
                //console.log('tmpData: ' + JSON.stringify(tmpData));
                this.data = [...tmpData];
                this.recCount = this.data.length;
            }catch(e){
                alert(e);
            }
        }

        handleSearchDB(event){

            if (event.key !== 'Enter'){
                return;
            }
            this.keyword = event.target.value;
            var term = this.keyword;
            console.log('term >' + term);
            var serchWord='';
            if(this.keyword!=''){
                serchWord= "AND (Sequence_Number__c LIKE '%"+term+"%'"
                         + "OR STORE_NAME__c LIKE '%"+term+"%')";
            }
            var sql = 'Select '
            + ' Id,Sequence_Number__c,GW_Store_Number__c,'
            + ' STORE_NAME__c,'
            + ' CommonId__c,'
            + ' VM_Examination_Result__c,'
            + ' Company_Name__c'
            + ' From TanakoManagement__c'
            + " Where Contact__r.AccountId = '" +this.recordId +"'"
            + serchWord
            + "order by Sequence_Number__c "+this.sort+" limit 5";
            console.log('test 1 sql>' + sql);
            commonSelectRecords({strSql: sql })
            .then(result => {
            //console.log('test 1 result>' + result);
            //this.results = result;
                
            // var a  = JSON.parse(JSON.stringify(this.results));
                var arr = [];
            
                for (var i = 0; i < result.length; i++) {
                    console.log('1.5)'+(JSON.stringify(result[i])));
                    var rec = {};
                    var key = Object.keys(result[i]);
                    for( var j = 0; j < key.length; j++ ) {
                        console.log('key )'+ key[j] + ' -- ' + result[i][key[j]]);
                        rec[ key[j] ] = result[i][ key[j] ];
                        if(key[j]=='Account'){
                            rec['Account.Name'] =  result[i][ key[j] ].Name;
                        }
                    }
                    rec['LinkValue'] = '/' + result[i].Id;
                    arr.push(rec);
                 }
                 this.results =  arr;
                 this.data = arr;
                 this.totalCount = arr.length;
                 console.log('2)'+JSON.stringify(this.results ));
            })
            .catch(error => {
                /*eslint no-console: "off"*/
                console.log(error);
                this.result = error;
                this.dispatchEvent( new ShowToastEvent({
                    title: '処理結果',
                    message: 'レコード取得が失敗しました。\n' + error.body.message,
                    variant: 'error',
                    mode: 'dismissable'
                }));
            })
        }


}
tanakoDtable.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
    <isExposed>true</isExposed>
</LightningComponentBundle>
CommonDmlUtil.cls
public with sharing class CommonDmlUtil {
    @AuraEnabled(cacheable=true)
    public static List<SObject> commonSelectRecords(String strSql){
        return Database.query(strSql);
    }
}

実装効果

昇順・降順切替

image.png
image.png

検索結果

表示内容から検索
image.png
DBから検索した結果
image.png

まとめ

今所はまた未完成ですけど。目的としてはDBから条件相応しいレコードを決まった件数まで取り出し、表示内容が昇順・降順の順位変更ができる。表示内容から絞り込みとDBから絞り込み二種類の検索ができるというテーブルを作成したい

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?