工作的需要,做了3年的wpf (mvvm)……,又因为项目的需求,回归到web的开发。
<李> 3年前,vue是我三年前没用过的玩意儿。
<李> 3年前,引导组件没现在成熟。
<李> 3年前,字体棒的普及度没有现在高。
<李> 3年前,ui组件的选择也没有现在多。
整个项目采用了oracle + dapper + + mvc + easyui城堡的技术结合,本篇博客重点介绍easyui。
easyui的默认风格看久了很容易产生视觉疲劳,在这个项目中,我个性化订制风格。
订制easyui模板的工作量是挺大的,我用了一个偷懒的方法,花了几百块钱在网上买了几个easyui的皮肤,然后对这些皮肤,进行优化和重构。
钱比较紧的同学,可以去下载easyui的免费皮肤。
<强> 1,加载数据
,通过帖子,url的方法向后端请求数据,如图所示:
$(" #列表”).datagrid ({
标题:“交易公司”,
loadMsg:“@CommonResource.Processing”,
工具栏:“#结核病”,
宽度:“100%”,
高度:“100%”,//idField:“ID”,//数据:getData (),
url:“.action”(“GetList”),
方法:“文章”,
rownumbers:没错,
autoRowHeight:假的,
适合:没错,//fitColumns:没错,
条纹:真的,//奇偶行
singleSelect:真的,//单选模式
checkOnSelect:假的,
selectOnCheck:假的,
可折叠:没错,
分页:没错,
pageNumber: 1、
页大小:10,
pageList (10、20):,
queryParams: {},
列:[[
{字段:“Company_Name”,标题:“公司名称”,宽度:100年,可分类的:虚假},
{字段:“缩写”,标题:“简”称,宽度:100年,可分类的:虚假},
{字段:“Business_Address”,标题:“经营地址”,宽度:100年,可分类的:虚假},
{字段:“Registered_Address”,标题:“注册地址”,宽度:100年,可分类的:虚假},
{字段:“电话”、标题:“电话的,宽度:100年,可分类的:虚假},
{字段:“传真”,标题:“传真”,宽度:100年,可分类的:虚假},
{字段:“接触器”,标题:“联系人”,宽度:100年,可分类的:虚假},
{字段:“付款”,标题:“结算方式的,宽度:100年,可分类的:虚假},
{字段:“Beneficiary_Name”,标题:“开户名称”,宽度:100年,可分类的:虚假},
{字段:“Beneficiary_Address”,标题:“开户地址”,宽度:100年,可分类的:虚假},
{字段:“Advising_Bank”,标题:“通知行”,宽度:100年,可分类的:虚假},
{字段:“Bank_Address”,标题:“银行地址”,宽度:100年,可分类的:虚假},
{字段:“Swift_Code”,标题:“银行代码”,宽度:100年,可分类的:虚假},
{字段:“Beneficiary_Account”,标题:“银行账户”,宽度:100年,可分类的:虚假},
{字段:“Company_Chop”,标题:“电子章”,宽度:100年,可分类的:虚假},
{字段:“Send_Url”,标题:“发件邮箱链接的,宽度:100年,可分类的:虚假},
{字段:“Send_Email”,标题:“发件人邮箱”,宽度:100年,可分类的:虚假},
{字段:“备注”,标题:“备注”,宽度:100年,可分类的:虚假},
{字段:“Created_By”,标题:“创建人”,宽度:100年,可分类的:虚假},
{字段:“Creation_Date”,标题:“创建日期”,宽度:100年,可分类的:虚假},
{字段:“Modify_By”,标题:“修改人”,宽度:100年,可分类的:虚假},
{字段:“Modify_Date”,标题:“修改日期”,宽度:100年,可分类的:虚假},
]],
});
});
之前
b,先定义好了datagrid的属性以及列,再通过loadData的方法设置datagrid的数据
$(' #细节').datagrid ({
loadMsg:“@CommonResource.Processing”,
工具栏:“#结核病”,
宽度:“100%”,
高度:“100%”,//数据:[],
rownumbers:没错,
autoRowHeight:假的,
适合:没错,
fitColumns:没错,
条纹:没错,
singleSelect:没错,
可折叠:假的,
分页:假的,
queryParams: {},
列:[[
{字段:“Country_Name”,标题:“国家名称”,宽度:100年,可分类的:虚假},
{字段:“Item_Number”,标题:“物料编码”,宽度:100年,可分类的:虚假},
]],
});
