Recently this time has been doing on the Flex project, work time to pay attention to the next Easyui, colleagues are also in the development of the use of migrant workers, I, learning points can undoubtedly increase the point of capital.
The entire framework uses the background spring MVC + persistence layer mybatis+ front end to show easyui+ database MySQL. Hey, it's not hard, just a practicing demo, other features are in perfect.
First look at the interface:
Personally think that the Easyui framework will be the general development of the components to use, layout is good, at least for the intern I, learn quite happy, as for its own limitations and the existence of the bug problem, can only find a way to solve it, hehe.
Introduction to the DataGrid, this is how I write this "Administrator Information List" page
The DATAGRID-DEMO.JS,JS added inside the page is mainly about some of the table operations and the DataGrid layout, Colmun style<body id= "" > <!--user list--> <div id= "tabs" class= "Easyui-tabs" fit= "true" border= "false" > <div title= "user list" style= "Padding:0px;overflow:hidden; color:red; "> <div id=" test "></div> </div> </div> </body>
$ (document). Ready (function () {$ (#test). DataGrid ({loadmsg: ' Data Loading ... ', Title: ' Administrator Information list ', Iconcls: ' Icon-e
Dit ', width:1184, height:530, url: ' <%=basepath%>userlist.do ', Nowrap:false, Striped:true, Collapsible:true, Sortname: ' uid ', SortOrder: ' desc ', Remotesort:false, Pagination:true, Rownumbers:t Rue, frozencolumns:[[{field: ' CK ', checkbox:true}, {title: ' Number ', field: ' ID ', WIDTH:80,SO Rtable:true}], columns:[[{title: ' Basic Information ', Colspan:3}, {field: ' opt ', title: ' Operation ', Width:100,align: ' Cen
Ter ', Rowspan:2, Formatter:function (value,rec) {return ' <span style= ' color:red ' > Edit delete </span> '; }],[{field: ' Name ', Title: ' Username ', width:120}, {field: ' Age ', Title: ' Ages ', width:120}, {field: ' P
Hone ', title: ' Contact Way ', width:120}]], toolbar:[{ID: ' Btnadd ', text: ' Add user ', Iconcls: ' Icon-add ',
Handler:function () { Opendialog_add (); }, '-', {ID: ' btncut ', text: ' Delete user ', Iconcls: ' Icon-cancel ', handler:function () {Batch (' delete
'); }, '-', {ID: ' btnstart ', Text: ' Batch enabled ', Iconcls: ' Icon-ok ', handler:function () {batch (' delete ')
; }, '-', {ID: ' btnstop ', Text: ' Bulk disable ', Iconcls: ' Icon-remove ', handle:function () {Batch (' Invali
d ');
}
}]
});
var p = $ (' #test '). DataGrid (' Getpager ');
if (p) {$ (P). Pagination ({onbeforerefresh:function () {alert (' before Refresh ');
}
});
}
});
function Resize () {$ (' #test '). DataGrid (' resize ', {width:700, height:400});
function getselected () {var selected = $ (' #test '). DataGrid (' getselected ');
if (selected) {Alert (selected.code+ ":" +selected.name+ ":" +selected.addr+ ":" +selected.col4);
} function Getselections () {var ids = [];
var rows = $ (' #test '). DataGrid (' Getselections '); for (Var i=0;i<rows.length;i++) {Ids.push (Rows[i].code);
Alert (Ids.join (': '));
function Clearselections () {$ (' #test '). DataGrid (' Clearselections ');
function SelectRow () {$ (' #test '). DataGrid (' SelectRow ', 2);
function Selectrecord () {$ (' #test '). DataGrid (' Selectrecord ', ' 002 ');
function Unselectrow () {$ (' #test '). DataGrid (' Unselectrow ', 2); function MergeCells () {$ (' #test '). DataGrid (' MergeCells ', {index:2, field: ' Addr ', Rowspan:2, colspan
: 2}); }The URL for this is to invoke the background userlist method, as the following method is used in spring Mvc,controller:
@RequestMapping ("userlist")
@ResponseBody //1 public
Object Listuser (httpservletrequest req, HttpServletResponse response) throws ioexception{
map<string, object> result = new hashmap<string, object& gt; (2);
list<user> users = Userservice.getalluser (null, NULL);
Jsonarray Jsonarray = new Jsonarray ();
for (User user:users) {
Jsonobject jsonobject = new Jsonobject ();
Jsonobject.put ("id", User.getuid ());
Jsonobject.put ("Name", User.getname ());
Jsonobject.put ("Age", User.getage ());
Jsonobject.put ("Phone", User.getphone ());
Jsonarray.add (Jsonobject);
}
2
result.put ("Total", users.size ());
Result.put ("Rows", Jsonarray);
return Jsonobject.fromobject (result);
}1 here in Springmvc, you can add a @responsebody annotation to a controller method, which means that the return result of the method is written directly into the HTTP response body, returning a string, spring The JSON format is well supported in MVC, and the JSON converter is added to the configuration file, and you don't see the effect if you don't add this annotation. The configuration file is written as follows
<bean class = "Org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" > < Property name= "Messageconverters" > <list> <ref bean= "Mappingjacksonhttpmessageconverter"/ ><!--JSON converter--> </list> </property> </bean>
The above is the last two days of free time to do a small demo, recently learning Highcarts, integrated into the demo can produce very beautiful statistical map. We'll save up next week. Modules include user login module, input and output Excel format, upload files and so on, want to slowly integrate this framework into a small application system, hehe, also calculate the internship period a very good account. October-November, will soon school recruit, there are many job fairs, or small rookie I have to hurry up, eh. Time wasted a lot of hope that they can find a satisfactory job. Come on.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
