Multiple Select. jQuery multiselect. Linq.js CRUD Methods. One of my favorite JavaScript libraries is Linq.js (LINQ for JavaScript). Unfortunately the author is not responding to pull requests so I’m going to post my update here. I’ve added CRUD methods to the library so that you can Add, Delete, and Update items easily. I’ve found this very useful pattern where I load a lot of data when the page loads, convert it to an Enumerable using Linq.js, then as the user modifies data update it locally and send updates back to the server asynchronously.
Here are examples of each method I’ve added: You can download my linq.js file here. You can also play with a fiddle I created using the example above. Alternatively you can pass a function to Update instead of an object (makes sense if you are updating more than one item at a time): Build an App with Vue.js: A Lightweight Alternative to AngularJS. Front-end frameworks like AngularJS allow us to build out very nice single page applications easily, especially when we become well versed with all the concepts. However, for many projects, frameworks like Angular can actually be a little bit more than what we need. If all we want to do is implement a few features a single page application, it’s can be a bit much to setup the necessary config, routing, controllers, services and more that make up an Angular app.
For something more lightweight, a great solution is Vue.js. Vue is a library that focuses heavily on the ViewModel—the two-way data bindings that tie what we see and interact with on the screen with the application’s data model. In this way (and as stated on the Vue.js website), the library is “not a full-blown framework – it is designed to be a view layer that is simple and flexible”. In this tutorial we will be building a simple events bulletin board application that will allow users to add and remove events. . # Setting Up the HTML. 將htmltabel轉成json. jQuery DataTables – How to add a checkbox column - JSFiddle. GitHub - wenzhixin/bootstrap-table: An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) Griddle - React Grid Component.
KingKong Bruce記事: 如何為Visual Studio加上未支援的JavaScript框架InstelliSense功能，以React為例. 一開始提到VS2013是有原因的，在VS2013提供一個神奇JavaScript海螺，它提供一個很神奇的功能，如果你使用了一個Visual Studio還不正式支援的JavaScript框架(以下用React為例)，那透過它的幫忙，你的Visual Studio就能取得有限React語法提示功能。 方法一：///references .js 如果你是使用CDN方式(例如：<script src=" 接下來的動作很簡單，請把react.js拉至目前正在撰寫的.js編譯區中。 可以看到.js最上方加入一行///reference的註解。 這時候神奇的事就立即發生了，你可以試著輸入React. ，React開始有語法提示了。 .jsx要用複製的，複製上面的語法，貼在最上方。 方法二：_references.js 上述方式解決單一檔案的問題，但如果我就是一個React的前端專案，每一個React .js/.jsx都要這樣拉，還是很煩。 其實只需要加入一個名稱_references.js的檔案就能解決這個問題。 不過，像React這種純前端的專案，大多會採用Empty範例來建立專案，那要怎麼新增_references.js？ 我們在scripts目錄按下新增： 加入後，預設它會去掃瞄並加入所有.js的參考。
注意一下它第一行的/// <autosync enabled="true" />設置，如果你不希望Visual Studio自動加入所有.js的參考，請修改enabled="false"，然後透過手動拉你想參考的.js進來_references.js即可。 Implicit(Web)組態 像我前面的圖，為了加入_references.js，特地加入scripts目錄，前端習慣使用src目錄，這很怪，那麼我們也可以在Visual Studio進行JavaScript參考設置：工具 → 選項 → 文字編輯器 → JavaScript → IntelliSense → 參考 → 參考群組：選擇Implicit(Web)。 把react.js移出專案之外，然後加入參考群組中即可。 Trip.js. Examples - Select2. Single select boxes Select2 can take a regular select box like this... and turn it into this... Alaska Multiple select boxes Select2 also supports multi-value select boxes. Select boxes with labels You can, and should, use a <label> with Select2, just like any other <select> element. A placeholder value can be defined and will be displayed until a selection is made. Select a state In addition to handling options from a standard <select>, Select2 can also retrieve the results from other data sources. Loading array data Select2 provides a way to load the data from a local array.
Enhancement duplicate Loading remote data Select2 comes with AJAX support built in, using jQuery's AJAX methods. Select2/select2 When using Select2 with remote data, the HTML required for the select is the same as any other Select2. You can configure how Select2 searches for remote data using the ajax option. Select2 will pass any options in the ajax object to jQuery's $.ajax function, or the transport function you specify.
jQuery Raty | A Star Rating Plugin - Washington Botelho. You need just to have a div to build the Raty. Used when we want starts with a saved rating. If you need to start you score depending of a dynamic value, you can to use callback for it. You can pass any value for it, not necessarily a data- value. You can use a field value for example. Changes the name of the hidden score field. Changes the number of stars. You can receive the number of stars dynamic using callback to set it. Change the maximum of start that can be created. You can prevent users to vote. You can decide if the rating will be readOnly dynamically returning true of false on callback. If readOnly is enabled and there is no score, the hint "Not rated yet!
" You can represent a float score as a half star icon. Enabled The round rules are: Down: score <= x.25 the star will be rounded down;Half: score >= x.26 and <= x.75 the star will be a half star;Up: score >= x.76 the star will be rounded up. Disabled The rules becomes: You can customize the round values of the halfShow option. Mrkt 的程式學習筆記: JavaScript – String.format. jQuery Overview. What is jQuery? jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto − Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery − How to use jQuery? There are two ways to use jQuery. Local Installation − You can download jQuery library on your local machine and include it in your HTML code.CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).
Local Installation Go to the to download the latest version available.Now put downloaded jquery-2.1.3.min.js file in a directory of your website, e.g. Example Now you can include jquery library in your HTML file as follows − This will produce following result − CDN Based Version What is Next ? Memoization暫存方法.
Functions can use objects to remember the results of previous operations, making it possible to avoid unnecessary work. This optimization is called memoization. JavaScript's objects and arrays are very convenient for this. Let's say we want a recursive function to compute Fibonacci numbers. A Fibonacci number is the sum of the two previous Fibonacci numbers. The first two are 0 and 1: This works, but it is doing a lot of unnecessary work. The fibonacci function is called 453 times.
We will keep our memoized results in a memo array that we can hide in a closure. Var fibonacci = (function ( ) { var memo = [0, 1]; var fib = function (n) { var result = memo[n]; if (typeof result ! This function returns the same results, but it is called only 29 times. We can generalize this by making a function that helps us make memoized functions. Var memoizer = function (memo, formula) { var recur = function (n) { var result = memo[n]; if (typeof result ! ECMAJAVASCRIPT陣列方法. The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
Description Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays. Arrays cannot use strings as element indexes (as in an associative array) but must use integers. Common operations Create an Array let fruits = ['Apple', 'Banana'] console.log(fruits.length) Access an Array item using the index position let first = fruits[0] let last = fruits[fruits.length - 1] Constructor.
介紹jQuery map()與grep() - 黑暗執行緒. 寫這篇的動機是常在專案看到「古典式」JavaScript陣列處理，例如：跑迴圈將物件陣列的某個字串屬取出轉成字串陣列、篩選物件陣列取得特定類別的集合。 用for迴圈處理沒什麼不對，但既然專案已經用了jQuery，能一行搞定卻寫成三五行不免可惜（程式又不按行數計酬，寫愈多手愈酸咩 XD）。 感覺上還有些朋友不認識$.map()跟$.grep()這兩個好東西，故寫篇文章推薦一下。 若用LINQ做比方，＄.map()相當於 .Select(o => 傳回數值或其他型別物件).ToArray()，可將物件陣列轉換成某個屬性或其他型別物件組成的陣列；$.grep()則類似 .Where(o => 傳回布林值).ToArray()，可過濾陣列保留符合條件的元素項目。 使用概念如下，輸入陣列，執行後傳回陣列： $.map(array, function(element, index) { return 新陣列的元素; }); （註：若輸出陣列想略過特定元素，就return null或undefined） $.grep(array, function(element, index) { return true或false; }); （傳回true的元素才會出現在篩選結果） 來看實例，以下程式有四個範例，分別用傳統方法及$.map(), $.grep()實現「物件陣列轉字串陣列」以及「過濾物件陣列保留特定類別」，程式不複雜，直接看程式碼，開始想想可以用在哪些專案角萿吧！ 排版顯示純文字複製文字 <title>jQuery map & grep</title> function Product(category, name) { this.category = category; this.name = name; var items = [ new Product("Phone", "iPhone4S"), new Product("Phone", "Lumia 920"), new Product("Phone", "小米"), new Product("Pad", "Nexus7"), new Product("Pad", "iPad") //範例一：取得產品名稱字串陣列 var names = []; for (var i = 0; i < items.length; i++) { //範例二：篩選手機類的產品陣列.