网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

在Asp.Net中使用JQueryEasyUI

最近做一个小工具,列表显示页面准备使用JQuery的UI框架,因为之前知道有jQWidgets这个框架,所以直接就下载下来使用了,jQWidgets的功能很强大,Demo和文档也非常详细,但使用后发现有几个问题就果断放弃了使用jQWidgets:
  • 页面加载速度比较慢;
  • 当列表字段过多出现横向滚动条时,拖动滚动条非常卡(在IE下都很卡,Chrome好点);
  • 分页取数稍显麻烦,也可能是我没研究透。
经过一番比较选择了JQueryEasUI,目前最新版本为1.3.1:
  • 官方下载
  • 官方演示
  • 官方文档
其实是用类似的框架,看看官网的文档也就OK了,本文是我最近是用JQueryEasyUI的一个总结,也可以让初使用JQueryEasyUI的朋友少走弯路。

下载引用

下载后解压的文件目录如下图:
在Asp.Net中使用JQueryEasyUI
  • demo:JQueryEasyUI的一些示例页面,在项目使用可以将该目录删除;
  • locale:该目录中是一些本地化文件,用来支持不同的语言,如中文可以引用其中的easyui-lang-zh_CN.js;
  • plugins和src:这两个目录中是支持JQueryEasyUI各种功能的js文件;
  • themes:主题目录,目录中有三种主题,default、gray和metro,另外还有一个icons目录和icon.css,在页面使用引用icon.css即可。
使用JQueryEasyUI需要引用四个文件,两个css和两个js文件:



如果需要使用本地化 还需要引用:

JQueryEasyUI Grid的分页

根据官网的文档可以很容易的构建Grid,期初我没有引用本地化文件easyui-lang-zh_CN.js,列表的分页栏显示出来是英文的,在网上查阅后得知可以用代码的方式重新构建分页栏:
//设置分页控件 varp = $('#dg').datagrid('getPager');
$(p).pagination({
    pageSize: 10, //每页显示的记录条数,默认为10 pageList: [10, 20, 30, 40, 50], //可以设置每页记录条数的列表 beforePageText: '第', //页数文本框前显示的汉字 
afterPageText: '页    共 {pages} 页',
    displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
/*onBeforeRefresh:function(){              $(this).pagination('loading');              alert('before refresh');              $(this).pagination('loaded');          }*/}); 
后来发现只需要引用本地化文件easyui-lang-zh_CN.js后分页栏就自动显示为中文了。引用本地化文件还可以解决日历控件格式的问题,所以如果是做中文系统建议还是在页面中引用本地化文件。

JQueryEasyUI控件的取值

使用JQuery取控件的值很简单,如下:
$("#CstName").val();
$("#TaskNo").val(),
如果要使用JQueryEasyUI的日历控件、下拉控件或其他的一些控件,给普通的input、select控件添加一个class即可:

 
       
    
现在取这些控件的值需要使用下面的方法:
$("#FeedBackDate").datebox("getValue");
$("#IsKfCl").combobox("getValue");

Grid ToolBar的两种方式

通常在Grid列表控件的上方会添加一些按钮如:新增、编辑、删除等,如下面效果:
在Asp.Net中使用JQueryEasyUI
在JQueryEasyUI中可以使用ToolBar来实现,ToolBar可以在DataGrid初始化时定义,如下:
$('#dg').datagrid({
    collapsible: false,
    fitColumns: true,
    singleSelect: true,
    remoteSort: false,
    sortName: 'RoleName',
    sortOrder: 'desc',
    nowrap: true,
    method: 'get',
    loadMsg: '正在加载数据...',
    url: '...',
    frozenColumns: [[
        { field: 'ck', checkbox: true}
    ]],
    columns: [[
        { field: 'ID', title: 'ID',  80, sortable: true},
        { field: 'Name', title: '名称',  100,sortable:true}
    ]],
    pagination: true,
    pageNumber: 1,
    rownumbers: true,
    toolbar:
    [
        {
            id: 'btnAdd',
            text: '添加',
            iconCls: 'icon-add',
            handler: function() {
                $("#name").val("");
                add();
            }
        },
        '-',
        {
            id: 'btnEdit',
            text: '编辑',
            iconCls: 'icon-edit',
            handler: function() {
                varselected = $('#dg').datagrid('getSelected');
                if(selected) {
                    varname = selected.Name;
                    $("#Name").val(name);
                    edit();
                }
            }
        },
        '-',
        {
            id: 'btnDelete',
            text: '删除',
            disabled: true,
            iconCls: 'icon-remove',
            handler: function() {
            }
        }
    ]
});
        });
还有一种方法就是将ToolBar单独定义在div中,然后在DataGrid的初始化时关联div的ID,首先定义ToolBar的div,ID为tb:

    
        新增
        编辑-
        拷贝′
        复制地址·
        下载REG
        删除y

区域:
客户名称:
        查询
    
在DataGrid的初始化时设置toobar属性值为tb:
pagination: true,
pageNumber: 1,
rownumbers: true,
toolbar: '#tb',
...
单独定义ToolBar个人认为要灵活些,也会让JS代码简洁些。

Form表单的提交

上面说过了列表的显示,下面就来讲下数据的提交,有两种方式可以实现:
我在刚使用的时候是使用的第一种方法:
//保存functionsaveFeedBackLog(mode,id) {
    $.ajax({
        type: "POST",
        dataType: "json",
        //cache:true,
url: "../Ajax/FeedBackLogAjax.ashx?Method=SaveFeedBackLog",
        data: { FeedBackDate: $("#FeedBackDate").datebox("getValue"),
            CstName: $("#CstName").val(),
            TaskNo: $("#TaskNo").val(),
            FeedBackContent: $("#FeedBackContent").val(),
            CsZrr: $("#CsZrr").combobox("getValue"),
            CsYzResult: $("#CsYzResult").val(),
            IsKfCl: ,
            KfZrr: $("#KfZrr").combobox("getValue"),
            EndDate: $("#EndDate").datebox("getValue"),
            KfClDate: $("#KfClDate").val(),
            Wtyy: $("#Wtyy").val(),
            Mode:mode,
            ID:id
        },
        success: function(data) {
        //..........
当页面字段比较多的时候会比较麻烦,保存时需要将每个字段的值逐一取出传送到后台,编辑时也需要将行中各字段的值逐一取出赋给表单中的控件,后来发现JQueryEasyUI提供Form的Ajax提交的方式,会使代码精简很多,而且使用Form表单提交的方式还能用到JQueryEasyUI提供的一些验证控件。
编辑时赋值给表单
functionedit() {
    varrowData = $('#dg').datagrid('getSelections');
    if(rowData.length == 0) {
        $.messager.alert('提示', '请选择要编辑的项!','info');
    }
    else if(rowData.length > 1) {
        $.messager.alert('提示', '只能选择一项进行编辑!','info');
    }
    else{
        _mode = "2";
        varrow = $('#dg').datagrid('getSelected');
        openDialog();
        $('#fm').form('load', row);
        _srcCodeManageID = row.SrcCodeManageID;
        url = "../Ajax/SrcCodeManageAjax.ashx?Method=SaveSrcCodeManage&ID="+ row.SrcCodeManageID+"&Mode="+_mode;
    }
}
保存
//保存functionsaveSrc() {
    $('#fm').form('submit', {
        url: url,
        onSubmit: function() {
            return$(this).form('validate');
        },
        success: function(data) {
            if(data =="Success") {
                $('#dlg').dialog('close');      // close the dialog  
       $('#dg').datagrid('reload');    // reload the user data  
       $.messager.alert('提示', '保存成功!', 'info');
            }
            else if(data=="Error")
            {
                $.messager.alert('错误', '系统出错!', 'error');
            }
        }
    });  
}
可以看出第二种方法相比第一种代码精简了很多,而且保存时还能用到表单的一些校验,比如设置必填项、电话、邮件格式等。
当然JQueryEasyUI还有很多其他的控件和功能,有待以后慢慢研究,希望本文对你有所帮助。

分享题目:在Asp.Net中使用JQueryEasyUI
本文来源:http://bjjierui.cn/article/ggocei.html

其他资讯