EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</head>
<body>
<style type="text/css">
#fm { } .ftitle {
font-size: 14px;
font-weight: bold;
padding: 5px ;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
} .fitem {
margin-bottom: 10px;
} .fitem label {
display: inline-block;
text-align: right;
width: 80px;
font-size: 13px;
padding-right: 10px;
} .fitem input {
width: 160px;
}
</style> <table id="list" class="easyui-datagrid" style="width: auto; height: 350px;" toolbar="#dlg-toolbar"></table> <div id="dlg-toolbar">
<table cellpadding="" cellspacing="" style="width:100%">
<tr> <td style="text-align:left">
<input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
</td>
</tr>
<tr>
<td>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" id="add" plain="true">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" id="edit" plain="true">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-clear" plain="true">Delete</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
</td>
</tr>
</table>
</div> <div id="dd" class="easyui-dialog" title="My Dialog" style="width:350px;height:290px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true" buttons="#dlg-buttons">
<form id="form" method="post" style="margin-top: 20px; margin-left: 20px;">
<div class="fitem" >
<label>商品编号:</label>
<input id="itemid" name="itemid" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>用户名:</label>
<input id="productid" name="productid" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>姓名:</label>
<input id="listprice" name="listprice" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>操作1:</label>
<input id="unitcost" name="unitcost" data-options="required:true,min:0,precision:5" style="" class="easyui-numberbox" editable="true" />
</div>
<div class="fitem" >
<label>操作2:</label>
<input id="attr1" name="attr1" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>操作3:</label>
<input id="status" name="status" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
</form>
</div> <div id="dlg-buttons">
<table cellpadding="" cellspacing="" style="width:100%">
<tr>
<td style="text-align:right">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" id='btnSave'>Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
</td>
</tr>
</table>
</div> </body>
<script> $("#list").datagrid({
iconCls: "icon-add",
fitColumns: false,
loadMsg: "数据加载中......",
data:[ { "productid": "K9-DL-01", "unitcost": , "status": "P", "listprice": , "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Venomless", "itemid": "EST-11" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Rattleless", "itemid": "EST-12" }, { "productid": "RP-LI-02", "unitcost": , "status": "P", "listprice": , "attr1": "Green Adult", "itemid": "EST-13" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "Tailless", "itemid": "EST-14" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "With tail", "itemid": "EST-15" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Female", "itemid": "EST-16" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-17" }, { "productid": "AV-CB-01", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-18" }, { "productid": "AV-CB-03", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-134" }] ,
pagination: true,
rownumbers: true,
nowrap: false,
showFooter: true,
singleSelect: true, columns: [[
{
field: 'itemid', title: '编号', width: , align: 'center',
formatter: function (value, row, index) {
return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>";
}
},
{
field: 'productid', title: '用户名', width: , align: 'center',
},
{
field: 'listprice', title: '姓名', width: , align: 'center',
},
{
field: 'unitcost', title: '操作1', width: , align: 'center',
},
{
field: 'attr1', title: '操作2', width: , align: 'center',
},
{
field: 'status', title: '操作3', width: , align: 'center',
}
]] })
$(function () {
$("#add").click(function(){
$('#dd').dialog({title:'创建'}).dialog('open');
$('#itemid').textbox("setValue",'');
$('#productid').textbox("setValue",'');
$('#listprice').textbox("setValue", '');
$('#unitcost').textbox("setValue", '');
$('#attr1').textbox("setValue", '');
$('#status').textbox("setValue", '');
});
$("#edit").click(function(){
var row = $("#list").datagrid("getSelected");
if(row==null){
layer.msg('没有选中记录', { icon: });
return;
}
$('#dd').dialog({title:'修改'}).dialog('open');
$('#itemid').textbox("setValue",row.itemid);
$('#productid').textbox("setValue", row.productid);
$('#listprice').textbox("setValue", row.listprice);
$('#unitcost').textbox("setValue", row.unitcost);
$('#attr1').textbox("setValue", row.attr1);
$('#status').textbox("setValue", row.status);
});
$("#delete").click(function(){ });
$("#btnSave").click(function () {
if ($('#form').form('validate')) {
$.ajax({
type: 'post',
url: '',
data: $("#form").serialize(),
success: function (result) {
if (result == "True") {
$('#dlg').dialog('close')
$('#list').datagrid('load', { })
layer.msg('保存成功', { icon: });
}
else {
layer.alert("保存失败");
}
}
});
}
});
});
</script>
</html>
EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七的更多相关文章
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...
- easyUI slider滑块，在加载出来后，easyUI slider滑块禁用方法
easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...
- DataGrid 的DataSource重新加载数据
DataGrid 的DataSource重新加载数据,若直接重新给DataSource赋值是没有效果的,若只是修改原有数据中的单个值,此方法有效,但是针对完全不一样的数据直接重新赋值的方式是无效的,此 ...
- html加载与脚本运行中，由于html未完全加载而导致脚本找不到dom元素无法执行事件
问题: 如题,就是说alert后出现一个对话框,我没有点关闭,其他js文件或html会被加载吗,我遇到一个问题就是在页面加载时调用一个div的click事件,却没有被执行,但是在调用事件前面加上ale ...
- 此编译单元不包含在frame元数据中指定的factoryClass，无法加载配置的运行时共享库
警告:此编译单元不包含在frame元数据中指定的factoryClass,无法加载配置的运行时共享库.要在没有运行时共享库的情况下进行编译,请将 -static-link-runtime-shared ...
- PHP+MySQL+Easyui tree菜单从后台加载json数据(一)
实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...
- EasyUI的treegrid组件动态加载数据问题的解决办法
http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...
- EasyUi 分页 和 表格数据加载
这里说明的是将说有数据先返回到前端再由前端去分页,性能可能没有先在后台分好页再返回给前端高 但如果操作不涉及大数据的话也没什么大问题,具体问题具体分析 要使用分页控件首先要声明初始化一下: //设置分 ...
- EasyUI ComboTree无限层级异步加载示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...
随机推荐
- Entrust - Laravel 用户权限系统解决方案
Zizaco/Entrust 是 Laravel 下 用户权限系统 的解决方案, 配合 用户身份认证 扩展包 Zizaco/confide 使用, 可以快速搭建出一套具备高扩展性的用户系统. Conf ...
- learning ddr input clock frequency change condition
- 学习Linux系统的方法有很多，适合自己的才是最好
综观现在互联网+的发展以及应用,作为一个从事IT行业的人员,应该懂得Linux占比多大份量,所以说,去掌握Linux是一种相当重要的谋生途径,当然,如果你对它产生情感那更好.这篇文章主要是本人结合自身 ...
- Mysql中contact、group_concat、concat_ws、repeat
一.CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. mysql> select concat('11','22',' ...
- Linux如何产看系统信息
如何查看已安装的CentOS版本信息: 1)[root@localhost ~]# cat /proc/version Linux version 2.6.18-194.el5 (mockbuild@ ...
- 浅议APC
0x01 APC中断请求级别 在Intel x86体系结构中,外部硬件中断是通过处理器上的"中断管脚"或者一个称为"本地APIC(local APIC)" ...
- js如何调试,使用debug模式
js的代码断点调试非常简单,不需要借助代码编辑器,只要浏览器就行了(注意:html代码打断点是没有用的,只有js的才行,下图第二步打开开发者模式使用F12才对):
- ubuntu 搭建ss和使用方法
一 ubuntu 搭建ssa.安装 sudo apt-get install python-gevent python-pip python-m2crypto sudo pip insta ...
- UBUNTU安装 Rabbitvsc可视化版本控制客户端软件
sudo add-apt-repository ppa:rabbitvcs/ppa sudo apt-get update sudo apt-get install rabbitvcs-core ra ...
- 实现简单的shell sed替换功能
通过脚本传参数可以实现替换 # -*-coding:utf-8-*- # Author:sunhao import sys f = open('yesterday','r',encoding='utf ...