你们好，最近小活发现有诸多的小伙伴们对于easyUI项目如何启动运行，easyui这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、 在百度搜索引擎中搜索关键词“jQuery EasyUI”，如下图所示。
2、 访问JQuery EasyUI官网，如下图所示。
3、 点击导航栏上的【下载】超链接，进入下载页面，选择要下载的GPL Edition版本，如下图所示。
4、 解压jQuery EasyUI文件夹和项目目录，如下图所示。
5、 在项目文件夹中，新建一个index.html，引入文件如easyui.css，jquery。easyui.min.js进入其中。
6、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/default/easyui.css'
7、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/icon.css'
8、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/color.css'
9、 script type='text/javascript' src='http://code.jquery.com/jquery-1.6.min.js'/script
10、 script type='text/javascript' src='http://www.jeasyui.com/easyui/jquery.easyui.min.js'/script
11、 让我们以基本的CRUD应用为例。
12、 !DOCTYPE html
13、 html
14、 head
15、 meta charset='UTF-8'
16、 titleBasic CRUD Application - jQuery EasyUI CRUD Demo/title
17、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/default/easyui.css'
18、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/icon.css'
19、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/color.css'
20、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/demo/demo.css'
21、 script type='text/javascript' src='http://code.jquery.com/jquery-1.6.min.js'/script
22、 script type='text/javascript' src='http://www.jeasyui.com/easyui/jquery.easyui.min.js'/script
23、 /head
24、 body
25、 h2Basic CRUD Application/h2
26、 pClick the buttons on datagrid toolbar to do crud actions./p
27、
28、 table id='dg' title="My Users" class='easyui-datagrid' style='width:700px;height:250px'
29、 url='get_users.php'
30、 toolbar='#toolbar' pagination='true'
31、 rownumbers='true' fitColumns='true' singleSelect='true'
32、 thead
33、 tr
34、 th field='firstname' width='50'First Name/th
35、 th field='lastname' width='50'Last Name/th
36、 th field='phone' width='50'Phone/th
37、 th field='email' width='50'Email/th
38、 /tr
39、 /thead
40、 /table
41、 div id='toolbar'
42、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-add' plain='true' onclick='newUser()'New User/a
43、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-edit' plain='true' onclick='editUser()'Edit User/a
44、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-remove' plain='true' onclick='destroyUser()'Remove User/a
45、 /div
46、
47、 div id='dlg' class='easyui-dialog' style='width:400px;height:280px;padding:10px 20px'
48、 closed='true' buttons='#dlg-buttons'
49、 div class='ftitle'User Information/div
50、 form id='fm' method='post' novalidate
51、 div class='fitem'
52、 labelFirst Name:/label
53、 input name='firstname' class='easyui-textbox' required='true'
54、 /div
55、 div class='fitem'
56、 labelLast Name:/label
57、 input name='lastname' class='easyui-textbox' required='true'
58、 /div
59、 div class='fitem'
60、 labelPhone:/label
61、 input name='phone' class='easyui-textbox'
62、 /div
63、 div class='fitem'
64、 labelEmail:/label
65、 input name='email' class='easyui-textbox' validType='email'
66、 /div
67、 /form
68、 /div
69、 div id='dlg-buttons'
70、 a href='javascript：void(0)' class='easyui-linkbutton c6' iconCls='icon-ok' onclick='saveUser()' style='width:90px'Save/a
71、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-cancel' onclick='javascript：$('#dlg').dialog('close')' style='width:90px'Cancel/a
72、 /div
73、 script type='text/javascript'
74、 var url;
75、 function newUser(){
76、 $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
77、 $('#fm').form('clear');
78、 url='save_user.php';
79、 }
80、 function editUser(){
81、 var row=$('#dg').datagrid('getSelected');
82、 if (row){
83、 $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
84、 $('#fm').form('load',row);
85、 url='update_user.php?id='+row.id;
86、 }
87、 }
88、 function saveUser(){
89、 $('#fm').form('submit',{
90、 url: url,
91、 onSubmit: function(){
92、 return $(this).form('validate');
93、 },
94、 success: function(result){
95、 var result=eval('('+result+')');
96、 if (result.errorMsg){
97、 $.messager.show({
98、 title: 'Error',
99、 msg: result.errorMsg
100、 });
101、 } else {
102、 $('#dlg').dialog('close'); //close the dialog
103、 $('#dg').datagrid('reload'); //reload the user data
104、 }
105、 }
106、 });
107、 }
108、 function destroyUser(){
109、 var row=$('#dg').datagrid('getSelected');
110、 if (row){
111、 $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
112、 if (r){
113、 $.post('destroy_user.php',{id:row.id},function(result){
114、 if (result.success){
115、 $('#dg').datagrid('reload'); //reload the user data
116、 } else {
117、 $.messager.show({ //show error message
118、 title: 'Error',
119、 msg: result.errorMsg
120、 });
121、 }
122、 },'json');
123、 }
124、 });
125、 }
126、 }
127、 /script
128、 style type='text/css'
129、 #fm{
130、 margin:0;
131、 padding:10px 30px;
132、 }
133、 .ftitle{
134、 font-size:14px;
135、 font-weight:bold;
136、 padding:5px 0;
137、 margin-bottom:10px;
138、 border-bottom:1px solid #ccc;
139、 }
140、 .fitem{
141、 margin-bottom:5px;
142、 }
143、 .fitem label{
144、 display:inline-block;
145、 width:80px;
146、 }
147、 .fitem input{
148、 width:160px;
149、 }
150、 /style
151、 /body
152、 /html
153、 这个案例的操作效果如下图所示。
154、 让我们以CRUD DataGrid为例。
155、 !DOCTYPE html
156、 html
157、 head
158、 meta charset='UTF-8'
159、 titleBuild CRUD DataGrid with jQuery EasyUI - jQuery EasyUI Demo/title
160、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/default/easyui.css'
161、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/themes/icon.css'
162、 link rel='stylesheet' type='text/css' href='http://www.jeasyui.com/easyui/demo/demo.css'
163、 script type='text/javascript' src='http://code.jquery.com/jquery-1.6.min.js'/script
164、 script type='text/javascript' src='http://www.jeasyui.com/easyui/jquery.easyui.min.js'/script
165、 script type='text/javascript' src='http://www.jeasyui.com/easyui/jquery.edatagrid.js'/script
166、 /head
167、 body
168、 h2CRUD DataGrid/h2
169、 pDouble click the row to begin editing./p
170、
171、 table id='dg' title="My Users" style='width:700px;height:250px'
172、 toolbar='#toolbar' pagination='true' idField='id'
173、 rownumbers='true' fitColumns='true' singleSelect='true'
174、 thead
175、 tr
176、 th field='firstname' width='50' editor='{type:'validatebox',options:{required:true}}'First Name/th
177、 th field='lastname' width='50' editor='{type:'validatebox',options:{required:true}}'Last Name/th
178、 th field='phone' width='50' editor='text'Phone/th
179、 th field='email' width='50' editor='{type:'validatebox',options:{validType:'email'}}'Email/th
180、 /tr
181、 /thead
182、 /table
183、 div id='toolbar'
184、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-add' plain='true' onclick='javascript：$('#dg').edatagrid('addRow')'New/a
185、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-remove' plain='true' onclick='javascript：$('#dg').edatagrid('destroyRow')'Destroy/a
186、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-save' plain='true' onclick='javascript：$('#dg').edatagrid('saveRow')'Save/a
187、 a href='javascript：void(0)' class='easyui-linkbutton' iconCls='icon-undo' plain='true' onclick='javascript：$('#dg').edatagrid('cancelRow')'Cancel/a
188、 /div
189、 script type='text/javascript'
190、 $(function(){
191、 $('#dg').edatagrid({
192、 url: 'get_users.php',
193、 saveUrl: 'save_user.php',
194、 updateUrl: 'update_user.php',
195、 destroyUrl: 'destroy_user.php'
196、 });
197、 });
198、 /script
199、
200、 /body
201、 /html
202、 这个案例的操作效果如下图所示。
以上就是easyui这篇文章的一些介绍，希望对大家有所帮助。
标签：
免责声明：本文由用户上传，如有侵权请联系删除！