Kart Görüntüleme ve Tepki Verme

 

Kart görünümü, kayıtları tamamen özelleştirilebilir kartlar olarak göstermenize ve Kart / Liste görünümleri arasında kolayca geçiş yapmanıza olanak tanır.

Bu özelliğe sponsor olduğu ve bunu toplulukla paylaşmamıza izin verdiği için Brainweber Inc.'e çok teşekkür ederiz.

Bu özellik, herhangi bir ızgaranıza (EntityGrid / DataGrid) kolayca uygulayabileceğiniz bir Mixin olarak uygulanır.

CustomerGrid.ts:

    var editItem = this.editItem.bind(this);

    new Serenity.CardViewMixin({
        grid: this,
        renderItem: (item, index) => React.createElement(CustomerCard, {
            item: item,
            editItem: editItem
        })
    });

Kart şablonları için React'ı kullandık , böylece onu ihtiyaçlarınıza göre özelleştirebilir ve satırlarınızda bulunan herhangi bir özelliği kullanabilirsiniz.

Müşteri Kartı.tsx:

    export class CustomerCard extends React.Component<CustomerCardProps> {
        render(): React.ReactNode {
            var item = this.props.item;
            return (
                <table>
                    <tbody>
                        <tr>
                            <td rowSpan={4} className="img">
                                <img src={getRandomImage(item)} />
                            </td>
                        </tr>
                        <tr>
                            <td className="name">
                                <a href="javascript:;" onClick={e => 
                                this.props.editItem(item)}>
                                    {item.CustomerID} - {item.CompanyName}
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td className="contact">{item.ContactName}, 
                            {item.ContactTitle}</td>
                        </tr>
                        <tr>
                            <td className="country">{item.City}, {item.Country}</td>
                        </tr>
                    </tbody>
                </table>
            );
        }
    }
}