Simple use examples of Ligerui

A brief introduction to Ligerui

Ligerui is a jquery-based UI framework whose core design goals are rapid development, easy to use, powerful, lightweight, and easy to scale. Simple and powerful, committed to quickly build a web front-end interface solution that can be applied to. net,jsp,php and so on. Web server environment.

ligerui has the following main features:

• Span style= "line-height:1.5;" > Easy to use, lightweight

• controls are practical, feature-wide, and can solve most enterprise information application design scenarios

• rapid development, using Ligerui can reduce the amount of code that is significantly larger than traditional development

• Easy to expand, including default parameters, Form/table editor, multilanguage support, and so on

• support Java,. NET, PHP and other Web service side

• support ie6+, Chrome, Firefox and other browsers

• Open source, the source framework level is easy to understand

(PS: The above introduction to the official website)

The 21 simplest demo

(1) Download the latest version of Ligerui from the official website , the current is: Http://pan.baidu.com/s/1dDNAc7Z

(2) Create a new Java Web project and Some of Ligerui's things are copied into the project, such as this:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7F/64/wKiom1cc4BHh4L-qAAA3SFG5axs238.png "title=" 20160406142901_72045.png "alt=" Wkiom1cc4bhh4l-qaaa3sfg5axs238.png "/>

(3) The simplest demo, the file name is: demo1.jsp

<%@ page language= "java"  contenttype= "Text/html; charset=utf-8" pageEncoding= "UTF-8"% ><%string path = request.getcontextpath (); String basepath = request.getscheme ()  +  "://"  + request.getservername ()  +  ":"  + request.getserverport () + path +  "/";%>
As can be seen from the above code, first introduced a few jquery and Ligerui JS files, and then from the use of jquery is very similar to the
The textbox is simple to use

Three using local data to establish a table
ligergrid can be used to display tables, Ligergrid bound data in two ways, one is to use local data, one is to use server data. Where the data parameter needs to be configured using the local database, and the URL parameter needs to be configured using the server data, I will briefly describe it using the local Data establishment table, which is the demo2.jsp 
 in the figure above.
<%@ page language= "java"  contenttype= "Text/html; charset=utf-8" pageEncoding= "UTF-8"% ><%string path = request.getcontextpath (); String basepath = request.getscheme ()  +  "://"  + request.getservername ()  +  ":"  + request.getserverport () + path +  "/";%>
The effect is as follows:
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7F/64/wKiom1cc4HOCYdlzAAA3yM1jQDM958.png "title=" 20160406150500_56603.png "alt=" Wkiom1cc4hocydlzaaa3ym1jqdm958.png "/>
Note: The above rows represent the data source field name, which is defined in theLigerui/js/plugins/ligergrid.jsthis file, including the "pagesize", "Sortname" and "sortorder" that we use to display the data pagination, is also defined in this file.
 650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7F/62/wKioL1cc4WCB8tIiAACtQiLnVBw346.png "title=" 20160406145531_34743.png "alt=" Wkiol1cc4wcb8tiiaactqilnvbw346.png "/>   
  So, after we know the field name, we can make a custom data source field name, for example:    
var Grid = $ ("#maingrid"). Ligergrid ({checkbox:true,//) custom data source field name root: ' Row ', columns: [{name: ' ID ', display: ' Serial number ', Widt H:200}, {name: ' name ', display: ' Names ', width:400}],data: {row:griddata}});
Of course, some other field names can be customized according to this principle.

My brief introduction is here, want to know more can view the source code, can refer to these official website to specify the Getting Started article: http://www.cnblogs.com/leoxie2011/category/291637.html
Of course, you can also refer to the website provided by demo:http://www.ligerui.com/demo.html

This article is from "Zifangsky's personal blog" blog, make sure to keep this source http://983836259.blog.51cto.com/7311475/1767349
Simple use examples of Ligerui