easyUi表格练习

最新推荐文章于 2024-07-03 23:56:01 发布

徐工_CH

最新推荐文章于 2024-07-03 23:56:01 发布

阅读量1.5k

点赞数 44

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/m0_47440858/article/details/135351116

版权

EasyUi表格练习

练习一

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>datagrid+combobox+textbox</title>
	    <link rel="stylesheet" type="text/css" href="css/easyui.css">
	    <link rel="stylesheet" type="text/css" href="css/icon.css">
	    <link rel="stylesheet" type="text/css" href="css/color.css">
	    <script type="text/javascript" src="js/jquery.min.js"></script>
	    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	</head>
	<body>
		<table id="myTable"></table>
	</body>
</html>
<script type="text/javascript">
 $(function(){
		 //定义被编辑的行号
		 var rowNumber = 0;
		//页面加载完成就渲染表格
			$("#myTable").datagrid({
					columns:[[
					         {title:"编号",field:"id",checkbox:true},
					         {title:"姓名",field:"name",width:100,editor:{
					        	 								type:'validatebox',
					        	 								options:{}
					         								   }},
					         {title:"学号",field:"studentNumber",width:100,editor:{
								 								type:'numberbox',
								 								options:{}
							 								   }},
					         {title:"性别",field:"gender",width:100,editor:{
								 								type:'validatebox',
								 								options:{}
							 								   }}
					         ]],
					 url:'${pageContext.request.contextPath}/data.json',
					 
					 rownumbers:true,
					 singleSelect:true,
					 toolbar:
						 [{
							text:'添加数据',
							iconCls:'icon-add',
							handler:function(){
								$("#myTable").datagrid("insertRow",{
																	index:0,
																	row:{}
																	});	
								$("#myTable").datagrid("beginEdit",0);
								
												}
						   },
						   {
							text:'编辑数据',
							iconCls:'icon-edit',
							handler:function(){
								var hasSelect = $("#myTable").datagrid("getSelections");
								if(hasSelect.length == 1){
									//alert(hasSelect[0].name);
									var row = hasSelect[0];
									rowNumber = $("#myTable").datagrid("getRowIndex",row);
									$("#myTable").datagrid("beginEdit",rowNumber);
								}
								
								
							}
						   },
						   {
							text:'保存修改',
							iconCls:'icon-save',
							handler:function(){
								$("#myTable").datagrid("endEdit",rowNumber);
							}
							}],
							
					  pagination:true,
					  onAfterEdit:function(index,data,changes){
						 /*  alert(index);
						  console.info(data); */
						  $.post(
								"${pageContext.request.contextPath}/"	  
						  );
					  },
					  onDblClickCell:function(index, field,row) {
					  	console.log(index)
					  	console.log(field)
					  	console.log(row)
					  	var hasSelect = $("#myTable").datagrid("getSelections");
						if(hasSelect.length == 1){
							//alert(hasSelect[0].name);
							var row = hasSelect[0];
//							var dd = $('#myTable').datagrid('getEditor', { index:index,field:['name','studentNumber'] });
//                			$(dd.target).combobox('disable');
							rowNumber = $("#myTable").datagrid("getRowIndex",row);
							$("#myTable").datagrid("beginEdit",rowNumber);
						}
				   }
			
					 
			
			});
			
			function dblClickRow(index,row) {
			    var index1=-1;
			    //获取当前正在编辑第一个编辑单元格
			    var att=document.getElementsByClassName('datagrid-row-editing')[0];
			    if (att!=undefined&&att!=null) {
			        //获取该单元格的行号
			        index1 = att.getAttribute('datagrid-row-index');
			    }
			    //结束所有正在编辑的行
			    var rows=$('#tb6').datagrid('getRows');
			    rows.forEach(function (row1,index1) {
			        $('#tb6').datagrid('endEdit',index1);
			    });
			    //双击不是正在编辑的行时开始编辑
			    if (index!=index1) {
			        $('#tb6').datagrid('beginEdit',index);
			    }
			}
	 })
		
	 
</script>

练习二

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>datagrid+combobox+textbox</title>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="table">
        <table id="datagrid" class="easyui-datagrid" title="列表中带文本框下拉框" 
          style="width:700px;max-height: 422px;" 
          data-options="fitColumns:true,scrollBarSize:0">
        </table>
        <div style="margin-top:20px;">
            <a class="easyui-linkbutton c8" style="width:80px;" onclick="save()">save</a>
        </div>
    </div>
    <script>
        $(function () {
            var json = [{text:"F",value:"1"},{text:"M",value:"2"}];
            var dg = $("#datagrid").datagrid({
                columns:[[
                    {field:"id",width:80,title:"ID",align:"center"},
                    {field:"name",width:80,title:'姓名',align:"center",editor:{
                        type:"textbox"
                    }},
                    {field:"age",width:80,title:"年龄",align:"center"},
                    {field:"gender",width:80,title:"性别",align:"center",editor:{
                        type:"combobox",
                        options:{
                            data:json,
                            textField:"text",
                            valueField:"value",
                            panelHeight:"auto"
                        }
                    }}
                ]],
                data:[{id:101,name:"aaa",age:30,gender:"1"},
                    {id:102,name:"bbb",age:31,gender:'2'},
                    {id:103,name:"ccc",age:32,gender:"2"}],
                onLoadSuccess:function (data) {
                    for(var i=0;i<data.total;i++){
                        $(this).datagrid("beginEdit",i);
                    }
                }
            });
            
            var row = $('#datagrid').datagrid('getSelected');
            if(row) {
            	console.log(row);
            }
 
        })
        function save(){
            var data = $("#datagrid").datagrid("getRows");
            for(var i=0;i<data.length;i++){
                var ele = $("#datagrid").datagrid("getEditor",{index:i,field:"name"});
                data[i]["name"] = $(ele.target).val();
                var ele2 = $("#datagrid").datagrid("getEditor",{index:i,field:"gender"});
                data[i]["gender"] = $(ele2.target).val();
            }
            console.info(data);
        }
    </script>
</body>
</html>

来源：源代码来源

徐工_CH

关注

44
点赞
踩
50

收藏

觉得还不错? 一键收藏
打赏
0
评论
easyUi表格练习

EasyUi表格练习练习一<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>datagrid+combobox+textbox</title> <link rel="stylesheet" type="text/css" href="css/easyui.css"> <link rel="stylesh
复制链接

扫一扫