Блог

Я пытаюсь использовать jsGrid для простой таблицы с сортировкой заголовков, но у меня возникают проблемы даже с загрузкой базового образца. Это приложение на javascript и Vue, поэтому опубликовать ВЕСЬ код практически невозможно, поскольку он разбит на множество разных компонентов / файлов. Я постараюсь опубликовать соответствующие части.

HTML (символ-контейнер — это мой раздел jsGrid):

 <div class="left-side-column">
    <div class="menu-container">
        <input id="processButton" type="button" value="Do it" v-on:click="processImage" :disabled="disable">
        <div v-if="symbols.length !== 0">
            <span id="symbol-header">{{ symbols.length }} threads</span>
            <div id="symbol-container">
                <!-- <table id="symbol-table">
                    <tr style="border: 1px solid black">
                        <th></th>
                        <th></th>
                        <th>DMC #</th>
                        <th>Count</th>
                    </tr>
                    <symbol-item v-for="(symbol, index) in symbols" :key="index" :symbol="symbol"></symbol-item>
                </table> -->
            </div>
            <span class="slider-label">Color Count:</span>
            <div id="reduce-color-slider"></div>
        </div>
    </div>
</div>
 

CSS

 #symbol-container {
    height: 600px;
    overflow-y: auto;
}
 

Javascript

  processingComplete: function(stitcher) {
        this.symbols = stitcher.GetDMCList();

        var clients = [
            { Name: "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
            { Name: "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
            { Name: "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
            { Name: "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
            { Name: "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
        ];

        $('#symbol-container').jsGrid({
            width: "100%",
            height: "600px",
            pageLoading: false,
            inserting: true,
            editing: true,
            sorting: true,
            paging: false,
            autoload: true,
            data: clients,
            // controller: {
            //     loadData: function(filter) {
            //         console.log("loading");
            //         return clients;
            //     },
            //     insertItem: function(item) {
            //         console.log("insertItem being called..")
            //     },
            //     updateItem: function(item) {
            //         console.log("updateItem being called..")
            //     },
            //     deleteItem: function(item) {
            //         console.log("deleteItem being called..")
            //     }
            // },
            fields: [
                { name: "Name", type: "text", width: "50" }
            ]
        });
 

processingComplete() вызывается намного позже, чем загрузка страницы после взаимодействия с пользователем. Цель состоит в том, чтобы установить для «this.symbols» значение «data», поскольку это мои фактические данные. Я проверил формат, и он кажется правильным (изображение ниже). На данный момент я просто пытаюсь установить для статического массива «клиенты» значение data. В разделе с комментариями я пытался использовать контроллер, но у меня это тоже не сработало. Я также думаю, что у меня может быть пара ненужных свойств, поскольку я пробовал много разных вещей. Мне действительно нужна только сортировка — без подкачки, редактирования и т. Д. Я должен также упомянуть, что я не получаю НИКАКИХ ОШИБОК или каких-либо выходных данных в выводе консоли.

Пример данных this.symbols:

Кажется, сначала необходимо выполнить мою функцию «processingComplete». Если вы посмотрите на html, вы увидите, что «контейнер-символ» создается только в том случае, если:

 <div v-if="symbols.length !== 0">
 

Внутри «processingComplete» я устанавливал символы в список, поэтому я предположил, что я могу использовать контейнер символов. Кажется, Vue нужно было снова обработать v-if до того, как div был доступен. Надеюсь, я правильно это объясняю.

Мое временное решение состояло в том, чтобы поместить код jsGrid в setTimeout(function() {}, 1000); Это заставило его отображаться, что отвечало на вопрос «почему» у меня было так много проблем. В конце концов, я решил ВООБЩЕ НЕ использовать jsGrid. Мне нужна была сортировка только по 3 столбцам, и я довольно быстро ее свернул.

Спасибо Bravo за то, что указали мне правильное направление.