Ох уж эти работодатели..
— Папа, что мы сегодня будем кушать?
— Ничего сынок, ведь я работаю на интересной работе, в дружном коллективе
(с) кто-то
Пробую Vue.js
Ниже писал как тестировал React.js, в итоге не привилось от слова совсем. Всё надумано и усложнено. Для реализации элементарных вещей типа вывода динамического списка загруженного из вне требуются феерические велосипеды. В итоге не смог придумать ни одного примера использования где было бы проще и удобнее чем с использованием чистого javascript + jquery. Теперь задумался в сторону фреймворка Vue.js В нём понравилась идея компонентности (кирпичиков из «своих» тегов) для создания страницы. Пока тестировал, получился вот такой скриптик, демонстрирующий базовые возможности:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <head> <meta charset="UTF-8"> <title>VUE.js test</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} <span v-bind:title="title">Hello</span> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> <button v-on:click="addItem">Добавить элемент</button> <input v-model="message"> <brick></brick> <brick></brick> </div> <script> Vue.component('brick', { template: '<div>Это кирпичик</div>' }); var app = new Vue({ el: '#app', data: { message: 'Привет'+ new Date().toLocaleString(), title: 'title me'+ new Date().toLocaleString(), msg:"DDD", todos:[ {text:'Один',key:"wedwe"}, {text:'Два'}, {text:'Три'} ] }, methods: { addItem: function () { this.todos.push({text: this.message}); } }, }); </script> </body> </html> |
Сталкер в России. Обновление
Представляю обновленную карту Сталкер в России. Запускать необходимо на Minecraft версии 1.7.10, с ресурспаком LastDay.
Пробуем ReactJS
Если честно, пока не представляю, что можно сделать с ReactJS, что нельзя сделать удобно и понятно при помощи Jquery+PHP. Но решил таки попробовать. Итак, что такое ReactJS — фактически это надстройка над JavaScript написанная на языке JavaScript. Т.е. всё что написано на ReactJS — компилируется или «на лету» при помощи babel в javascript или при выкладывании в «продакт» и далее подключается вызовом обычного JavaScript.
Чтобы не разделять «продакт» «девелоп» и не возиться с бабелом, я у себя настроил один из вариантов, а именно в косоли висит запущеный скрипт-компилятор, который мониторит изменения файлов в папке src и при изменении чего-либо, компилирует файл в папку js. Соответственно всегда имеем «продакт».
Что нужно сделать чтоб начать пользоваться ReactJS:
1) Поставить NodeJS и ReactJS на компьютере где разрабатываем (компиляция кода ReactJS в JavaScript происходит при помощи его):
|
1 2 |
apt install nodejs npm install babel-cli@6 babel-preset-react-app@3 |
2) Ставим npx — утилита которая позволяет запускать npm пакеты
|
1 |
npm install -g npx |
3) Зпаускаем в консоли что-типа:
|
1 |
npx babel --watch src --out-dir js --presets react-app/prod |
В моем случае все скрипты из папки src компилируются в папку js
В итоге html страница может выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <head> <meta charset="UTF-8"> <title id="rj_title"></title> </head> <body id="rj_body"> <div id="root"></div> <script src="js/test.js"></script> </body> </html> |
а файл src/test.js так:
|
1 2 3 4 5 6 |
const name='Павел Игоревич'; const element = <h1>Привет {name}!</h1>; ReactDOM.render( element, document.getElementById('root') ); |
В браузере выведет:
jqgrid-free экспорт в эксель
В «свободном» форке jqgrid, к сожалению нет «встроенного» способа сформировать на основании таблицы файл Excel. Однако можно использовать сторонний способ https://github.com/SheetJS/sheetjs
Тогда код может получиться примерно следующий:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
jQuery("#paylist").jqGrid('navButtonAdd',"#paypager",{caption:'Excel', title: "Выгрузить в Excel",buttonicon: "none",position:"last", onClickButton:function(){ var filename = "export_rents.xlsx", data = $("#paylist").getRowData(); dataAsArray = [["dt", "amount", "comment"]]; for (i = 0; i < data.length; i++) { item = data[i]; dataAsArray.push([item.dt, item.amount, item.comment]); } var ws_name = "SheetJS"; var wb = XLSX.utils.book_new(), ws = XLSX.utils.aoa_to_sheet(dataAsArray); XLSX.utils.book_append_sheet(wb, ws, ws_name); XLSX.writeFile(wb, filename); } }); |