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#代码
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视图
@{
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