jquery LigerUI是什么？

jQuery LigerUI是基于jQuery而设计的一系列UI插件集合，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展，使用UI可以帮助开发者快速地创建友好的用户界面。



相关推荐：《jQuery教程》

jquery LigerUI 快速开发UI框架

LigerUI 是基于jQuery 的UI框架，其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大，致力于快速打造Web前端界面解决方案，可以应用于.net,jsp,php等等web服务器环境。

LigerUI有如下主要特点：

使用简单，轻量级

控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景

快速开发，使用LigerUI可以比传统开发减少极大的代码量

易扩展，包括默认参数、表单/表格编辑器、多语言支持等等

支持Java、.NET、PHP等web服务端

支持 IE6+、Chrome、FireFox等浏览器

开源，源码框架层次简单易懂。

Jquery LigerUI怎么使用

在写具体的使用之前先简单的说明下，小弟也是在项目上现学现卖，有不对的地方欢迎指正，小弟先谢过了。好了言归正传，大家可以在LigerUI的官方网站上下载一份源码，我们可以在 lib/ligerUI 目录下找到LigerUI的所有插件如下图：





可以看到ligerUI目录下面主要包括了，脚本，和皮肤这两个目录，JS下存放着ligerUi的所有插件，Skin目录下提供了浅绿色，和灰色两种不同风格的皮肤，大家可以根据自己的喜好选择使用哪种皮肤。json2.js文件是用来解决ie6 和ie7不支持json对象的问题（JSON.Parse(),和JSON.stringify()）,如果你需要你的程序支持ie6和ie7浏览器，你可能需要引用改脚本。接下来我们用简单例子来说明：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32





    

    

    

     

     

    

    

      

 





      

 





效果如图：



从上面的代码我们可以看出，首先需要引入对应你风格的皮肤下的ligerui-all.css文件，需要引入jquery文件，需要引入js/core/base.js文件，这个文件就如同你在使用jquery的时候需要引入jquery 的api文件一样，是个基础类吧，我个人的理解是这样。但在ligerui给出的demo中布局页面没有使用该文件而使用了/js/ligerui.min.js文件，我在一个项目中尝试过，如果同时引入了这两个则会出现错误，所以我在使用过程中除了布局页面，在别的画面中在引用ligerui别的插件之前都引用base.js文件。其次，你当前页面使用到了哪些ligerui的控件，则必须引用js/plugins下面对应的js插件。比如上面的例子中使用了ligerui的combox控件，则必须要引用对应的ligerComboBox.js插件。 控件的初始化如例子代码中的js部分，需要放在$(function(){...})中也就是，不同控件的初始化方法都类似，比如combox的初始化方法为$("...").ligerComboBox({...}), grid的初始化方法为("...").ligerGrid({...}).如上面的例子其中Data参数为该控件数据源参数，在ligerui中所有的数据源只能试用JSON格式，不同插架的具体参数、事件、方法请参考官方api：

在实际的项目中我们的数据源肯定是动态从数据库中存取，下面我将我在项目中使用的将DataTable转换为Json格式的类贴出来，有需要的可以拿去用。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

public class JsonOperation

    {

        ///

        /// DataTable转换Json

        ///

        /// 转换数据源

        /// Joson格式列

        /// DataTable格式列

        /// Json字符串

        public static string DataTableToJson(DataTable Source, string[] strJosonCols, string[] strParCols)

        {

            StringBuilder Json = new StringBuilder();

            Json.Append("[");

            if (Source.Rows.Count > 0)

            {

                for (int intRow = 0; intRow < Source.Rows.Count; intRow++)

                {

                    Json.Append("{");

                    for (int intCol = 0; intCol < strJosonCols.Length; intCol++)

                    {

                        Json.Append(strJosonCols[intCol] + ":\"" + Source.Rows[intRow][strParCols[intCol]].ToString().Replace("\"","").Trim() + "\"");

 

                        if (intCol < strJosonCols.Length - 1)

                        {

                            Json.Append(",");

                        }

                    }

                    Json.Append("}");

                    if (intRow < Source.Rows.Count - 1)

                    {

                        Json.Append(",");

                    }

                }

            }

            Json.Append("]");

            return Json.ToString();

 

        }

 

        ///

        /// DataTable转换Json

        ///

        /// 转换数据源

        /// Json字符串

        public static string DataTableToJson(DataTable Source)

        {

            StringBuilder Json = new StringBuilder();

            Json.Append("[");

            if (Source.Rows.Count > 0)

            {

                for (int i = 0; i < Source.Rows.Count; i++)

                {

                    Json.Append("{");

                    for (int j = 0; j < Source.Columns.Count; j++)

                    {

                        Json.Append(Source.Columns[j].ColumnName.ToString() + ":\"" + Source.Rows[i][j].ToString() + "\"");

                        if (j < Source.Columns.Count - 1)

                        {

                            Json.Append(",");

                        }

                    }

                    Json.Append("}");

                    if (i < Source.Rows.Count - 1)

                    {

                        Json.Append(",");

                    }

                }

            }

            Json.Append("]");

            return Json.ToString();

        }

    }