Giter VIP home page Giter VIP logo

vue-sql-query-builder's Introduction

vue-sql-query-builder

image

For vue-sql-query-builder.

How to use

yarn add vue-sql-query-builder

OR

npm install vue-sql-query-builder

Demo

yarn start

Init

import QueryBuilder from "vue-sql-query-builder";
const queryBuilder = new QueryBuilder();
const rules = [{
  condition: 'AND',
  id: 0,
  rules: [{
    id: 3,
    operator: 1,
    value: 9
  }, {
    condition: 'OR',
    id: 9,
    rules: [{
      id: 4,
      operator: 2,
      value: 'JAPAN'
    }]
  }]
}];
const fields = [
  { name: "ID", id: 1 },
  { name: "User", id: 2 },
  { name: "Age", id: 3 },
  { name: "Nation", id: 4 },
  { name: "Category", id: 8, type: "Category", categoryList: [{id: 100, name: 'toms'}, {id: 101, name: 'jerry'}] },
  { name: "Rate", id: 9, type: "Rate" },
  { name: "Date Picker", id: 5, type: "DatePicker" },
  { name: "Month Picker", id: 6, type: "MonthPicker" },
  { name: "Range Picker", id: 7, type: "RangePicker" }
];
const operators = [
  { name: 'equal', id: 1, symbol: '=' },
  { name: 'not equal', id: 2, symbol: '!=' },
  { name: 'is not null', id: 3, symbol: 'is not null' },
  { name: 'is null', id: 4, symbol: 'is null' },
  { name: 'in', id: 5, symbol: 'in' },
  { name: 'not in', id: 6, symbol: 'not in' },
  { name: 'less', id: 7, symbol: 'less' },
  { name: 'less or equal', id: 8, symbol: 'less or equal' },
  { name: 'greater', id: 9, symbol: 'greater' },
  { name: 'greater or equal', id: 10, symbol: 'greater or equal' },
  { name: 'between', id: 11, symbol: 'between' },
  { name: 'not between', id: 12, symbol: 'not between' }
];
queryBuilder.init({
  rules,
  fields,
  operators,
  id: "wrap",
  handleChange: (rules) => {
    // console.log(rules)
  }
})

vue-sql-query-builder's People

Stargazers

 avatar

Watchers

 avatar

Forkers

hyb121

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.