1

iMES.WebApi/wwwroot/BiManage/JS/JQGrid/grid/paging/App.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <JqxGrid ref="myGrid" @pagechanged="onPageChanged($event)" @pagesizechanged="onPageSizeChanged($event)"
+                 :width="getWidth" :source="dataAdapter" :columns="columns"
+                 :pageable="true" :sortable="true" :columnsresize="true"
+                 :autoheight="true" :selectionmode="'multiplerowsextended'">
+        </JqxGrid>
+
+        <div ref="eventsLog" style="display: none; margin-top: 30px;">
+            <div style="float: left;">
+                Event Log:
+
+                <JqxPanel ref="myPanel" :width="300" :height="300"></JqxPanel>
+            </div>
+            <div style="float: left;">
+                Paging Details:
+                <div ref="pagingInfo"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
+    import JqxPanel from "jqwidgets-scripts/jqwidgets-vue/vue_jqxpanel.vue";
+
+    export default {
+        components: {
+            JqxGrid,
+            JqxPanel
+        },
+        data: function () {
+            return {
+                getWidth: '90%',
+                dataAdapter: new jqx.dataAdapter(this.source),
+                columns: [
+                    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
+                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
+                    { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
+                    { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
+                    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
+                    { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
+                ]
+            }
+        },
+        beforeCreate: function () {
+            this.source = {
+                datatype: 'xml',
+                datafields: [
+                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
+                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
+                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
+                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
+                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
+                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
+                ],
+                root: 'entry',
+                record: 'content',
+                id: 'm\\:properties>d\\:OrderID',
+                url: 'orders.xml'
+            };
+        },
+        methods: {
+            onPageChanged: function(event) {
+                this.$refs.eventsLog.style.display = 'block';
+                let loggedElements = document.getElementsByClassName('logged');
+                if (loggedElements.length >= 5) {
+                    this.$refs.myPanel.clearcontent();
+                }
+                let args = event.args;
+                let eventData = 'pagechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + '</div>';
+                this.$refs.myPanel.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
+                // get page information.
+                let paginginformation = this.$refs.myGrid.getpaginginformation();
+                this.$refs.pagingInfo.innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
+            },
+            onPageSizeChanged: function (event) {
+                this.$refs.eventsLog.style.display = 'block';
+                this.$refs.myPanel.clearcontent();
+                let args = event.args;
+                let eventData = 'pagesizechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + ', Old Page Size: ' + args.oldpagesize + '</div>';
+                this.$refs.myPanel.prepend('<div style="margin-top: 5px">' + eventData + '</div>');
+                // get page information.
+                let paginginformation = this.$refs.myGrid.getpaginginformation();
+                this.$refs.pagingInfo.innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
+            }
+        }
+    }
+</script>
+
+<style>
+    .jqx-panel{
+        border: none;
+    }
+</style>

iMES.WebApi/wwwroot/BiManage/JS/JQGrid/grid/paging/index.htm

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>jQWidgets Vue Example</title>
+    <link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
+<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>  </head>
+  <body>  
+  <div id="app"></div>
+  <script src="dist/main.bundle.js"></script>  
+  </body>
+</html>

iMES.WebApi/wwwroot/BiManage/JS/JQGrid/grid/paging/main.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+new Vue({
+  el: '#app',
+  components: { App },
+  template: '<App/>'
+})

iMES.WebApi/wwwroot/BiManage/JS/JQGrid/grid/paging/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "jQWidgets_Vue_Demo",
+    "version": "1.0.0",
+    "description": "Vue.js Demos Build Project",
+    "author": "www.jqwidgets.com <sales@jqwidgets.com>",
+    "private": true,
+    "scripts": {
+        "build": "webpack --config webpack.config.js",
+        "start": "npm run build"
+    },
+    "devDependencies": {
+        "autoprefixer": "^7.1.2",
+        "css-loader": "^0.28.11",
+        "extract-text-webpack-plugin": "^3.0.0",
+        "file-loader": "^1.1.4",
+        "jqwidgets-scripts": "~6.1.0",
+        "portfinder": "^1.0.13",
+        "postcss-import": "^11.0.0",
+        "postcss-loader": "^2.0.8",
+        "postcss-url": "^7.2.1",
+        "style-loader": "^0.23.0",
+        "uglifyjs-webpack-plugin": "^1.1.1",
+        "url-loader": "^0.5.8",
+        "vue": "^2.5.2",
+        "vue-loader": "^13.3.0",
+        "vue-style-loader": "^3.0.1",
+        "vue-template-compiler": "^2.5.2",
+        "webpack": "^3.6.0",
+        "webpack-bundle-analyzer": "^2.9.0",
+        "webpack-dev-server": "^2.9.1",
+        "webpack-merge": "^4.1.0"
+    }
+}

iMES.WebApi/wwwroot/BiManage/JS/JQGrid/grid/paging/webpack.config.js

@@ -0,0 +1,50 @@
+'use strict'
+const path = require('path')
+const webpack = require('webpack')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+module.exports = {
+    entry: {
+        main: './main.js'
+    },
+    output: {
+        path: path.resolve(__dirname + '/dist'),
+        filename: '[name].bundle.js'
+    },
+    resolve: {
+        extensions: ['.js', '.vue'],
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js',
+            '@': path.resolve(__dirname + '/src'),
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader'
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader'
+            },
+            {
+                test: /\.css$/,
+                loaders: ['style-loader', 'css-loader']
+            }
+        ]
+    },
+    plugins: [
+        // strip all the warnings from Vue.js source code.
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+        // uglify build code
+        new UglifyJsPlugin({
+            // this speeds up the build
+            parallel: true
+        })
+    ]
+}