FieldsLinker is a jQuery plugin for drawing canvas based straight lines between 2 items within dynamic lists. Designed for matching files headers to database fields during the process importing. Allows drawing links between elements of 2 lists (headers of the file on the left, column names on the right) and getting back the result in a js object
Given 2 lists : for instance one from a text import, the second listing the fields a db table the jquery plugin allows you to draw and save links between the 2 lists
You can link on a one to one basis or on a one to many basis. Fields can be declared as mandatory the result reporting an error in case there are not filled.
Libraries
Include following libraries on page including external and internal.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,500"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" href="./fieldsLinker.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js">script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script> <script src="./fieldsLinker.js">script> |
HTML
Display list here.
JS
Define your own data for the lists.
var fieldLinks; $( document ).ready(function() { var input = { "options":{ "byName" : true, "lineStyle":"square-ends", "buttonErase":"Erase Links", "autoDetect":"on" }, "listA": { "name":"columns in files", "list" : [ "firstName", "lastName", "phone", "email", "role", "Birthday", "Adress", "Sales" ] }, "listB": { "name":"Fields available", "list" : [ "Id", "Company", "jobTitle", "adress 1", "adress 2", "first_name", "last_name", "email_adress", "Phone number" ] } }; fieldLinks=$("#demo").fieldsLinker("init",input); |
See live demo and download source code.
This awesome plugin is developed by PhilippeMarcMeyer. Visit their official github repository for more information and follow for future updates.
