jqwidgets.js:
是一个功能完整的框架，它具有专业的可触摸的jQuery插件、主题、输入验证、拖放插件、数据适配器，内置WAI-ARIA（无障碍网页应用）可访问性、国际化和MVVM模式支持。jQWidgets 为搭建专业网站和开发移动应用程序提供了一个全面的解决方案。它完全基于开放的标准和技术，如 HTML5、CSS、Javascript和jQuery。jQWidgets能实现响应式web开发，可以帮助您创建在桌面、平板电脑和智能手机上看起来很漂亮的应用程序和网站。
无论是美感还是功能都比easyui更胜一筹，代码开源使用收费。
SyntacticSugar.dll:
功能齐全包含验证、通用扩展函数、类型转换、文件上传、以及大量C#语法糖的一款工具类库。
源码地址：https://github.com/sunkaixuan/SyntacticSugar
SqlSugar.dll：
是一款基于MSSQL的轻量级、高性能、简单易用的ORM框架
教程及源码下载地址： http://www.cnblogs.com/sunkaixuan/p/4649904.html
JQWidgetsSugar.dll （本贴的重点）
基于jqwidgets.js 的C#封装类库 ，目前只完成了grid部分 ，我的所有GIT项目会在以后项目开发中持续更新
效果图：
C#代码
|
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using SqlSugar;using DAL;using JQWidgetsSugar;using Models;using SyntacticSugar;namespace NetJQWidgets.Controllers{ public class GridController : Controller { public ActionResult Index() { var adp = new GridDataAdapterSource(); adp.url = "/Grid/Data"; var gc = new GridConfig(); gc.gridbuttons = new List<GridButton>() { new GridButton(){ click="add", name="addbutton", icon="jqx-icon-plus", title="添加"}, new GridButton(){ click="edit", name="editbutton", icon="jqx-icon-edit", title="编辑"}, new GridButton(){ click="del", name="delbutton", icon="jqx-icon-delete", title="删除"} }; gc.pageSize = 20; gc.width = "80%"; gc.columns = new List<GridColumn>(){ new GridColumn(){ text="编号", datafield="id", width="40px", cellsalign=AlignType.left,datatype=Datatype.dataint }, new GridColumn(){ text="名称", datafield="name", cellsalign=AlignType.left,datatype=Datatype.datastring }, new GridColumn(){ text="产品名", datafield="productname", cellsalign=AlignType.left,datatype=Datatype.datastring }, new GridColumn(){ text="数量", datafield="quantity", cellsalign=AlignType.right , datatype=Datatype.dataint }, new GridColumn(){ text="创建时间", datafield="date", cellsformat="yyyy-MM-dd",cellsalign=AlignType.right, datatype=Datatype.datadate } }; var grid = JQXGrid.BindGrid("#netgrid", adp, gc); ViewBag.validationBind = ValidationSugar.GetBindScript("validate_key_grid_index"); return View(grid); } [HttpDelete] public JsonResult Del(int id) { using (SqlSugarClient db = SugarDao.GetInstance()) { ActionResultModel<string> model = new ActionResultModel<string>(); model.isSuccess = db.Delete<GridTable>(id); model.respnseInfo = model.isSuccess ? "删除成功" : "删除失败"; return Json(model); } } [HttpPost] public JsonResult Add(GridTable gt) { using (SqlSugarClient db = SugarDao.GetInstance()) { string message = string.Empty; var isValid = ValidationSugar.PostValidation("validate_key_grid_index", out message); ActionResultModel<string> model = new ActionResultModel<string>(); if (isValid)//后台验证数据完整性 { model.isSuccess = db.Insert(gt) != DBNull.Value; model.respnseInfo = model.isSuccess ? "添加成功" : "添加失败"; } else { model.isSuccess = false; model.respnseInfo = message; } return Json(model); } } [HttpPut] public JsonResult Edit(GridTable gt) { using (SqlSugarClient db = SugarDao.GetInstance()) { ActionResultModel<string> model = new ActionResultModel<string>(); string message = string.Empty; var isValid = ValidationSugar.PostValidation("validate_key_grid_index", out message); if (isValid)//后台验证数据完整性 { model.isSuccess = db.Update<GridTable>(gt, it => it.id == gt.id); model.respnseInfo = model.isSuccess ? "编辑成功" : "编辑失败"; } else { model.isSuccess = false; model.respnseInfo = message; } return Json(model); } } [OutputCache(Duration = 0)] public JsonResult Data(GridSearchParams pars) { using (SqlSugarClient db = SugarDao.GetInstance()) { if (pars.sortdatafield == null) { //默认按id降序 pars.sortdatafield = "id"; pars.sortorder = "desc"; } Sqlable sable = db.Sqlable().Form<GridTable>("g");//查询表的sqlable对象 var model = JQXGrid.GetWidgetsSource<Models.GridTable>(sable, pars);//根据grid的参数自动查询 return Json(model, JsonRequestBehavior.AllowGet); } } }} |
Razor视图
|
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}@using JQWidgetsSugar@section head{ <script src="/Content/My97DatePickerBeta/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <link href="/Content/My97DatePickerBeta/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css" /> <script src="/Content/jquery-validation-1.13.1/dist/jquery.validate.min.js" type="text/javascript"></script> <link href="/Content/jquery-validation-1.13.1/validation.sugar.css" rel="stylesheet" type="text/css" /> <script src="/Content/jquery-validation-1.13.1/validation.sugar.js" type="text/javascript"></script> <script type="text/javascript"> //添加 function add(row) { save(row, true); } //编辑 function edit(row) { save(row, false); } //删除 function del(row) { if (row == null) { jqxAlert('请选择一条记录！') } else { jqxDelete({ gridSelector: "#netgrid", url: "/Grid/Del", data: { id: row.id } }); } } function save(row, isAdd) { var isEdit = !isAdd; if (isEdit) { if (row == null) { jqxAlert('请选择一条记录！') return; } } //弹出框 jqxWindow("#editbox", isAdd?"添加":"编辑", 400, "auto"); //美化 button $("#editbox button").jqxButton(); //取消事件 $('#cancel').unbind(); $('#cancel').on('click', function (e) { $("#editbox").jqxWindow("close") }); if (isAdd) { //清空表单 $("#frmtable").formClear(); } else { //格日化日期 row.date = $.convert.toDate(row.date, "yyyy-MM-dd") //通过JSON自动填充表单，也可以自已实现 $("#frmtable").formFill({ data: row }) } //确定事件 $('#save').unbind(); $('#save').on('click', function (e) { factory.ajaxSubmit(function () { var url = isAdd ? "/grid/add" : "/grid/edit"; var type = isAdd ? "post" : "put"; $("#frmtable").ajaxSubmit({ url: url, type: type, success: function (msg) { if (msg.isSuccess == false) { jqxAlert(msg.respnseInfo); } $("#netgrid").jqxDataTable('updateBoundData'); $("#editbox").jqxWindow("close") }, error: function (msg) { console.log(msg); } }) }); }); } //绑定验证 $(function () { window.factory = new validateFactory($("form"), "<img src="/Content/jquery-validation-1.13.1/error.png" />"); factory.init(); }); </script> @Html.Raw(Model)}<div id="netgrid"></div><div id="editbox" class="hide"> <div class="savetable"> <form id="frmtable" class="form"> <table style="table-layout: fixed; border-style: none;"> <tr> <td align="right"> 名称: </td> <td align="left"> <input id="id" name="id" type="hidden" value="0" /> <input id="name" name="name" type="text" /> </td> </tr> <tr> <td align="right"> 产品名: </td> <td align="left"> <input id="productname" name="productname" type="text" /> </td> </tr> <tr> <td align="right"> 数量: </td> <td align="left"> <input id="quantity" name="quantity" type="text" /> </td> </tr> <tr> <td align="right"> 时间: </td> <td align="left"> <input id="date" class="Wdate" onclick="WdatePicker()" name="date" type="text" /> </td> </tr> <tr> <td> </td> <td> <br /> <button id="save" type="button"> 保存</button> <button style="margin-left: 5px;" type="button" id="cancel"> 取消</button> </td> </tr> </table> </form> </div></div>@Html.Raw(ViewBag.validationBind) |
例子不是很难，就是最基本的增、删、查、改。
功能虽然简单但是也考虑到了很多问题比如： 前端加后端的双向验证、代码扩展性强、语法简洁、异常的处理等。
DEMO下载地址：https://github.com/sunkaixuan/JQWidgetsSugar
原文链接：http://www.cnblogs.com/sunkaixuan/p/4703345.html