The code is very simple, the implementation of the function is also very simple, there is a need for small partners under the reference bar.
Copy Code code as follows:
<head runat= "Server" >
<title></title>
<!--Easyui-->
<link rel= "stylesheet" type= text/css "href=". /.. /script/jquery-easyui-1.3.2/themes/icon.css "/>
<link rel= "stylesheet" type= text/css "href=". /.. /script/easy_ui/themes/demo.css "/>
<link rel= "stylesheet" type= text/css "href=". /.. /script/jquery-easyui-1.3.2/themes/default/easyui.css "/>
<link href= ". /.. /css/function.css "rel=" stylesheet "type=" Text/css "/>"
<script type= "Text/javascript" src= ". /.. /script/jquery-1.8.2.js "></script>
<script type= "Text/javascript" src= ". /.. /script/jquery-easyui-1.3.2/locale/easyui-lang-zh_tw.js "></script>
<script type= "Text/javascript" src= ". /.. /script/jquery-easyui-1.3.2/jquery.easyui.min.js "></script>
<script type= "Text/javascript" src= ". /.. /script/jquery-easyui-1.3.2/locale/easyui-lang-zh_cn.js "></script>
<!--upload Control-->
<link href= ". /.. /css/images/style.css "rel=" stylesheet "type=" Text/css "/>"
<script type= ' Text/javascript ' src=. /.. /script/swfupload/swfupload.js "></script>
<script type= ' Text/javascript ' src=. /.. /script/swfupload/swfupload.queue.js "></script>
<script type= "Text/javascript" src= ". /.. /script/swfupload/swfupload.handlers.js "></script>
<script src= ". /.. /script/jquery.form.min.js "type=" Text/javascript "></script>
<script type= "Text/javascript" src= ". /.. /script/function.js "></script>
<!--editor-->
<script type= "Text/javascript" charset= utf-8 "src=". /.. /editor/kindeditor-min.js "></script>
<script type= "Text/javascript" charset= utf-8 "src=". /.. /editor/lang/zh_cn.js "></script>
<script type= "Text/javascript" >
/* jquery Easyui Operation * *
Window.onload = function () {
Initgird ();
}
Load Editor
var editor;
$ (function () {
Editor = kindeditor.create (' textarea[name= ' Describe "] ', {
Resizetype:1,
Uploadjson: '.. /ashx/upload_ajax.ashx?action=editorfile&iswater=1 ',
Filemanagerjson: '.. /ashx/upload_ajax.ashx?action=managerfile ',
Allowfilemanager:true
});
});
Initializing the Upload Control
$ (function () {
Initswfupload (".. /ashx/upload_ajax.ashx "," Filedata "," 1024 KB ",". /.. /script/swfupload/swfupload.swf ", 1, 1);
});
Search
function Search () {
$ (' #dgCaseInfo '). DataGrid (' Load ', {
Action: "Loadlistpage",
Names: $ ("#Names"). Val ()
});
}
Initialize table
function Initgird () {
$ ("#dgCaseInfo"). DataGrid ({
Autorowheight:false,
Loadmsg: ' Trying to load ... ',
URL: '.. /ashx/getsm_caseinformation.ashx?types=loadlistpage ',//Request data page
Sortname: ' ID ',//Sort field
IDfield: ' ID ',//Identity field, primary key
ICONCLS: ",//The picture on the left of the title
Singleselect:true,
Width: ' 100% ',//breadth
Height: ' auto ',//height
Nowrap:true,//whether to wrap, true will display the data in a row
Striped:true,//true parity exercise with different background colors
Collapsible:false,//foldable
SortOrder: ' desc ',//Sort type
Remotesort:true,//define whether to sort data from the server
Fit:true,
Singleselect:true,//is only allowed to select one row
Selectoncheck:false,/Click CheckBox does not select rows
Fitcolumns:true,//Column Auto Scale
Columns: [[
{field: ' Name ', Title: ' Product Name ', width:200, align: ' Left '},
{field: ' Add_time ', title: ' Add Time ', width:100, align: ' Left '},
{field: ' Describe ', title: ' Description ', width:100, align: ' Left ', hidden:true},
{field: ' FilePath ', title: ' Case Photo ', width:100, align: ' left ',
Formatter:function (value, row, index) {
if (row. FilePath!= "") {
Return ' <a href=javascript:showbigview (' + index + ') ><img alt= ' photo ' src= '. /.. ' + row. FilePath + ' "width=" 100px "height=" 25px "/></a>"
} else {
Return "No Pictures"
}
}
},
{field: ' Flag ', title: ' State ', width:100, align: ' left ',
Formatter:function (value, row, index) {
if (row. Flag = = 0) {
Return "on the shelves";
} else {
Return "Next Frame";
}
}
},
{field: ' typeID ', title: ' Commodity type ', width:100, align: ' Left ', hidden:true},
{field: ' Monadid ', title: ' Business Name ', width:100, align: ' Left ', hidden:true},
{field: ' Monadname ', title: ' Business Name ', width:100, align: ' Left ', hidden:true}
]],
Toolbar: "#toolbar",
Queryparams: {"Action": "Query"},
Pagination:true,//whether to open paging
Pageposition: ' Bottom ',//paging position
Pagenumber:1,//Default index page
Pagesize:10,//default one-page data bar count
Ondblclickrow:function (RowIndex, RowData) {//Line double click event
Edit ();
}
})
}
var URL;
Add a piece of data
function Add () {
$ ("#tdLeft"). Remove ()//delete seconds kill time TD
$ ("#tdSeckill"). Remove (); Delete seconds to kill time TD
Loadtypeid ();
Editor.html ("");
$ (' #dlg '). Dialog (' Open '). dialog (' Settitle ', ' Add ');
$ (' #form1 '). Form (' clear ');
url = '.. /ashx/getsm_caseinformation.ashx?types=listadd ';
$ ("Input[name= ' Flag ']"). EQ (0). attr (' checked ', ' true ');
}
Edit modifications
function Edit () {
$ ("#tdLeft"). Remove (); Delete seconds to kill time TD
$ ("#tdSeckill"). Remove (); Delete seconds to kill time TD
Loadtypeid ();
url = '.. /ashx/getsm_caseinformation.ashx?types=listedit ';
var row = $ (' #dgCaseInfo '). DataGrid (' getselected ');
if (row) {
$ (' #dlg '). Dialog (' Open '). dialog (' Settitle ', ' modify ');
$ ("#imageCaseUrl"). attr ("src", ". /.. "+ $ (' #FilePath '). Val ()); Set the URL of the <image id= "Imagecaseurl" >
Editor.html (row["Describe"]);
if (row["Isseckill"]==1)//If the product is a second kill state:
{
$ ("#trSeckill"). Append (' <td id= "Tdleft" class= "Tab_td_right" style= "width:80px;" > Seconds kill Time: </td><td id= "Tdseckill" class= "Tab_td_left" ><input id= "Seckilldatebegin" Easyui-datetimebox "Name=" Seckilldatebegin "style=" width:150px "> to <input id=" Seckilldateend "class=" Easyui-datetimebox "Name=" Seckilldateend "style=" width:150px "></td>")
Initialize Easyui date control
$ (' #SeckillDateBegin '). Datetimebox ({
Required:true,
Showseconds:false
});
$ (' #SeckillDateEnd '). Datetimebox ({
Required:true,
Showseconds:false
});
}
$ (' #form1 '). Form (' Load ', row);
$ ("#Flag"). Val (row["Flag"]); Set state value
}
}
Save data
function Save () {
Editor.sync ();
$ (' #form1 '). Form (' Submit ', {
Url:url,
Onsubmit:function () {
return $ (this). Form (' Validate ');
},
Success:function (Result) {
If (Result <= 0) {
$.messager.show ({
Title: ' Error ',
Msg:result.errorMsg
});
} else {
$ (' #dlg '). Dialog (' Close '); Close the dialog
$ (' #dgCaseInfo '). DataGrid (' reload '); Reload the user data
}
}
});
}
Delete a piece of data
function Destroy () {
var row = $ (' #dgCaseInfo '). DataGrid (' getselected ');
if (row) {
$.messager.confirm (' message hint ', ' Are you sure you want to delete? ', function (r) {
if (r) {
$.post ('.. /ashx/getsm_caseinformation.ashx?types=listdel ',
{Id:row.ID},
function (Result) {
if (Result > 0) {
$ (' #dgCaseInfo '). DataGrid (' reload '); Reload the user data
} else {
$.messager.show (
{//Show error message
Title: ' Error ',
Msg:result.errorMsg
}
);
}
}, ' json ');
}
});
}
}
Load Commodity type
function Loadtypeid () {
$ (' #TypeID '). ComboBox ({
URL: '.. /ashx/getsm_caseinformation.ashx?types=typeidload ',
Valuefield: ' ID ',
TextField: ' Dtyname '
});
}
Click on the picture to inspire
function Showbigview (rowIndex) {
var row = $ ("#dgCaseInfo"). DataGrid (' GetRows ') [RowIndex];
if (row["FilePath"].tostring ()!= "") {
$.messager.alert (' big picture Preview ', ' <img alt= ' "src= ... /.. ' + row["FilePath"] + ' width= ' 100px "height=" 100px "/>");
} else {
$.messager.alert (' message hint ', ' no caption picture Set! ');
}
}
Click the radio button to fire when normal
function Disdate () {
$ ("#tdLeft"). Remove (); Delete seconds to kill time TD
$ ("#tdSeckill"). Remove (); Delete seconds to kill time TD
}
Click on the radio button seconds to kill when fired
function Hidedate () {
$ ("#tdLeft"). Remove (); Delete seconds to kill time TD
$ ("#tdSeckill"). Remove (); Delete seconds to kill time TD
$ ("#trSeckill"). Append (' <td id= "Tdleft" class= "Tab_td_right" style= "width:80px;" > Seconds kill Time: </td><td id= "Tdseckill" class= "Tab_td_left" ><input id= "Seckilldatebegin" Easyui-datetimebox "Name=" Seckilldatebegin "style=" width:150px "> to <input id=" Seckilldateend "class=" Easyui-datetimebox "Name=" Seckilldateend "style=" width:150px "></td>")
Initialize Easyui date control
$ (' #SeckillDateBegin '). Datetimebox ({
Required:true,
Showseconds:false
});
$ (' #SeckillDateEnd '). Datetimebox ({
Required:true,
Showseconds:false
});
}
</script>
</head>
<body>
<table id= "Dgcaseinfo" >
</table>
<div id= "Toolbar" style= "width:100%" >
<div style= "PADDING-TOP:5PX; width:100% ">
<a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-add" plain= "true"
onclick= "Add ()" > Add </a> <a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-edit"
Plain= "true" onclick= "edit ()" > Edit </a> <a href= "javascript:void (0)" class= "Easyui-linkbutton"
iconcls= "Icon-remove" plain= "true" onclick= "Destroy ()" > Delete </a>
</div>
Product Name: <input id= "Names" name= "Names" class= "Easyui-validatebox" type= "text"/>
<a id= "Search" href= "#" onclick= "search ()" class= "Easyui-linkbutton" plain= "true"
data-options= "Iconcls: ' Icon-search '" > Search </a>
</div>
<div id= "Dlg" class= "Easyui-dialog" style= "width:800px"; height:400px; padding:10px; "
Closed= "true" buttons= "#dlg-buttons" >
<div class= "Ftitle" >
Product Information </div>
<form id= "Form1" runat= "Server" method= "POST" >
<table id= "Table_edit" class= "tab" style= "width:98%; font-size:12px; border:1px #E1E1E1 Solid "cellpadding=" 0 "
cellspacing= "1" >
<tr class= "Tab_tr" style= "Display:none;" >
<TD colspan= "4" >
<input name= "ID" class= "Easyui-validatebox"/>
<input name= "Monadid" class= "Easyui-validatebox"/>
</td>
</tr>
<tr style= "height:26px" class= "Tab_tr" >
<TD class= "Tab_td_right" style= "width:80px;" >
Product Name:
</td>
<TD class= "Tab_td_left" >
<input name= "name" class= "Easyui-validatebox" required= "true" style= "width:150px"/>
</td>
<TD class= "Tab_td_right" style= "width:80px;" >
Type of product:
</td>
<TD class= "Tab_td_left" >
<input id= "typeID" name= "typeID" style= "width:200px" required= "true"/>
</td>
</tr>
<tr style= "HEIGHT:26PX; "class=" Tab_tr ">
<TD class= "Tab_td_right" style= "width:80px;" >
Commodity Price:
</td>
<TD class= "Tab_td_left" >
<input name= "Price" class= "Easyui-validatebox" required= "true" style= "width:150px"/>
</td>
<TD class= "Tab_td_right" style= "width:80px;" >
Product Discounts:
</td>
<TD class= "Tab_td_left" >
<input id= "Discount" name= "Discount" style= "width:200px"/>
</td>
</tr>
<tr style= "HEIGHT:26PX; "class=" Tab_tr ">
<TD class= "Tab_td_right" style= "width:80px;" >
Inventory Quantity:
</td>
<TD class= "Tab_td_left" >
<input id= "Inventorynumber" name= "Inventorynumber" style= "width:150px"/>
</td>
<TD class= "Tab_td_right" style= "width:80px;" >
Number of sold Items:
</td>
<TD class= "Tab_td_left" >
<input id= "Sellnumber" name= "Sellnumber" style= "width:200px"/>
</td>
</tr>
<tr style= "HEIGHT:26PX; "class=" Tab_tr ">
<TD class= "Tab_td_right" style= "width:80px;" >
State
</td>
<TD class= "Tab_td_left" >
Shelves <input name= "Flag" type= "Radio" value= "0"/>
Lower shelf <input name= "Flag" type= "Radio" value= "1"/>
</td>
<TD class= "Tab_td_right" style= "width:80px;" >
Whether selling:
</td>
<TD class= "Tab_td_left" >
Normal <input name= "Ishotsell" type= "Radio" value= "0"/>
Hot <input name= "Ishotsell" type= "Radio" value= "1"/>
</td>
</tr>
<tr style= "HEIGHT:26PX; "Class=" Tab_tr "id=" Trseckill ">
<TD class= "Tab_td_right" style= "width:80px;" >
Second kill state:
</td>
<TD class= "Tab_td_left" >
Normal <input name= "Isseckill" type= "Radio" value= "0" onclick= "disdate ()"/>
Second kill <input name= "Isseckill" type= "Radio" value= "1" onclick= "hidedate ()"/>
</td>
<%--<td class= "Tab_td_left" >
<input id= "Seckilldatebegin" disabled= "Disabled" class= "Easyui-datetimebox" name= "Seckilldatebegin" data-options = "Required:true,showseconds:false" style= "width:150px" >
To <input id= "seckilldateend" disabled= "Disabled" "class=" Easyui-datetimebox "name=" Seckilldateend "data-options=" Required:true,showseconds:false "style=" width:150px ">
</td>--%>
</tr>
<tr style= "HEIGHT:26PX; "class=" Tab_tr ">
<TD class= "Tab_td_right" style= "width:80px;" >
Product PHOTOS:
</td>
<TD class= "Tab_td_left" colspan= "3" >
<div>
<asp:textbox id= "FilePath" name= "FilePath" runat= "Server" cssclass= "Txtinput normal left"
Maxlength= "255" ></asp:TextBox>
<a href= "javascript:;" class= "Files" >
<input type= "File" id= "FileUpload" name= "FileUpload" onchange= "Upload (' singlefile ', ' FilePath ', ' fileupload ');" ></a>
<span class= "Uploading" > uploading, please wait ...</span>
</div>
</td>
</tr>
<tr style= "HEIGHT:26PX;" class= "Tab_tr" >
<TD class= "Tab_td_right" style= "width:80px;" >
Description
</td>
<TD class= "Tab_td_left" colspan= "3" >
<textarea id= "Describe" name= "Describe" style= "width:99%"; height:100px; Visibility:hidden; "
runat= "Server" ></textarea>
</td>
</tr>
</table>
</form>
</div>
<div id= "Dlg-buttons" >
<a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-ok" onclick= "Save ()" >
Save </a> <a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-cancel"
onclick= "javascript:$ (' #dlg '). Dialog (' Close ')" > Cancel </a>
</div>
</body>
The above is the entire content of this article, I hope you can enjoy.
