Saeed_mn
7 سال پیش توسط Saeed_mn مطرح شد
0 پاسخ

استفاده از jqwidgets component برای react

سلام.خسته نباشید
من دارم برای نشون دادن اطلاعات از کتابخونه jqwidget استفاده میکنم ..همونطور که شما گفتید اطلاعات رو به صورت ajax با axios دریافت میکنم.
برای نمایش این اطلاعات دارم از jqxgrid استفاده میکنم..ولی نمیدونم چطور اطلاعات رو بهش پاس بدم ..هر کاری که کردم اطلاعات داخل grid نمایش داده نمیشه...الان باید جای localdata اطلاعات دریافتی نمایش داده بشه..ممنون میشم راهنماییم کنید..

import React from 'react';
import ReactDOM from 'react-dom';

import JqxGrid, { jqx } from 'jqwidgets-react/react_jqxgrid.js';

class App extends React.Component { 
    render() {       
        let source =
        {
            localdata: [
                ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
                ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
                ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
            ],
            datafields: [
                { name: 'CompanyName', type: 'string', map: '0' },
                { name: 'ContactName', type: 'string', map: '1' },
                { name: 'Title', type: 'string', map: '2' },
                { name: 'Address', type: 'string', map: '3' },
                { name: 'City', type: 'string', map: '4' },
                { name: 'Country', type: 'string', map: '5' }
            ],
            datatype: 'array'
        };

        let dataAdapter = new jqx.dataAdapter(source);

        let columns =
        [
            { text: 'Company Name', datafield: 'CompanyName', width: 200 },
            { text: 'Contact Name', datafield: 'ContactName', width: 150 },
            { text: 'Contact Title', datafield: 'Title', width: 100 },
            { text: 'Address', datafield: 'Address', width: 100 },
            { text: 'City', datafield: 'City', width: 100 },
            { text: 'Country', datafield: 'Country' }
        ];
        return (
            <JqxGrid ref='myGrid'
                width={850} source={dataAdapter} columns={columns} altstart={1}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

ثبت پرسش جدید

به همدیگه کمک کنیم

به Saeed_mn کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام