189 8069 5689

easyui-datagrid开发实践(总结)-创新互联

一,引言

松江网站建设公司创新互联,松江网站设计制作,有大型网站制作公司丰富经验。已为松江上1000家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的松江做网站的公司定做!

工作的需要,做了3年的wpf(mvvm)……,又因为项目的需求,回归到web的开发。

  • 3 years ago,vue是我三年前没用过的玩意儿。
  • 3 years ago,bootstrap组件没现在成熟。
  • 3 years ago,font awesome的普及度没有现在高。
  • 3 years ago,ui组件的选择也没有现在多。

easyui-datagrid开发实践(总结)

二,项目的前端(easyui模板订制)

整个项目采用了oracle  + dapper  + castle + mvc + easyui的技术结合,本篇博客重点介绍easyui。

easyui的默认风格看久了很容易产生视觉疲劳,在这个项目中,我个性化订制风格。

订制easyui模板的工作量是挺大的,我用了一个偷懒的方法,花了几百块钱在网上买了几个easyui的皮肤,然后对这些皮肤,进行优化和重构。

money比较紧的同学,可以去下载easyui的免费皮肤。

easyui-datagrid开发实践(总结)

三,easyui-datagrid的基本使用:

1,加载数据

a,通过post,url的方法向后端请求数据,如图所示:

easyui-datagrid开发实践(总结)

      $('#List').datagrid({
        title: "交易公司",
        loadMsg: '@CommonResource.Processing',
        toolbar: '#tb',
        width: "100%",
        height: "100%",
        //idField:"ID",
        //data: getData(),
        url: "@Url.Action("GetList")",
        methord: 'post',
        rownumbers: true,
        autoRowHeight: false,
        fit: true,
        //fitColumns: true,
        striped: true,   //奇偶行
        singleSelect: true,//单选模式
        checkOnSelect: false,
        selectOnCheck: false,
        collapsible: true,
        pagination: true,
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 20],
        queryParams: { },
        columns: [[
          { field: 'Company_Name', title: '公司名称', width: 100, sortable: false },
          { field: 'Abbreviation', title: '简称', width: 100, sortable: false },
          { field: 'Business_Address', title: '经营地址', width: 100, sortable: false },
          { field: 'Registered_Address', title: '注册地址', width: 100, sortable: false },
          { field: 'Tel', title: '电话', width: 100, sortable: false },
          { field: 'Fax', title: '传真', width: 100, sortable: false },
          { field: 'Contactor', title: '联系人', width: 100, sortable: false },
          { field: 'Payment', title: '结算方式', width: 100, sortable: false },
          { field: 'Beneficiary_Name', title: '开户名称', width: 100, sortable: false },
          { field: 'Beneficiary_Address', title: '开户地址', width: 100, sortable: false },
          { field: 'Advising_Bank', title: '通知行', width: 100, sortable: false },
          { field: 'Bank_Address', title: '银行地址', width: 100, sortable: false },
          { field: 'Swift_Code', title: '银行代码', width: 100, sortable: false },
          { field: 'Beneficiary_Account', title: '银行账户', width: 100, sortable: false },
          { field: 'Company_Chop', title: '电子章', width: 100, sortable: false },
          { field: 'Send_Url', title: '发件邮箱链接', width: 100, sortable: false },
          { field: 'Send_Email', title: '发件人邮箱', width: 100, sortable: false },
          { field: 'Remark', title: '备注', width: 100, sortable: false },
          { field: 'Created_By', title: '创建人', width: 100, sortable: false },
          { field: 'Creation_Date', title: '创建日期', width: 100, sortable: false },
          { field: 'Modify_By', title: '修改人', width: 100, sortable: false },
          { field: 'Modify_Date', title: '修改日期', width: 100, sortable: false },
        ]],

      });
    });

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:easyui-datagrid开发实践(总结)-创新互联
文章位置:http://cdxtjz.cn/article/dsiedp.html

其他资讯