datagrid vue_web项目 easyui-datagrid开发实践

一，引言

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

■  3 years ago，vue是我三年前没用过的玩意儿。

■  3 years ago，bootstrap组件没现在成熟。

■  3 years ago，font awesome的普及度没有现在高。

■  3 years ago，ui组件的选择也没有现在多。

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

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

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

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

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

三，easyui-datagrid的基本使用：

1，加载数据

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

$('#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'