In this section we continue to study the add/remove Settings of the small step interface.

Open up our p_cases.html, find the button that adds the little step, and add onclick to it:

Then we’ll find a place to write the js function:

This function is very simple, we simply ask the background to add an empty step, and then invoke the refresh step list function to refresh, so that we can see. Below we need to get the id of the large use case.

Then write urls.py:

Pys (views.pys);

Ok, let’s restart the service refresh page and try adding a few steps:

I found this. Looks like success, but the code is not complete. Because their order seems to be out of order. We designed their execution sequence from the beginning. But it seems that these steps are not in order of execution. So in the code we create, we add the order flag index, which should default to the sum of the number of existing steps +1:

After the service restart page is refreshed, let’s add another try:

Create three new ones and go to the background to see if the three are in order:

Looks like it’s all right.

Then I tried to delete the previous steps in the background and found an error:

Don’t panic. Take a closer look at why:

As stated above, the __str__ function returns an empty string called NoneTyep. It turned out that I had accidentally created three steps with no name, and that clicking on them or deleting them would return an error. The __str__ function in models.py must return the name of the string, so there is an error.

This is dirty data. So how do we delete them?

There are actually three ways:

  1. It is possible to ignore them and use our own feature to remove them after we have developed our own.

  2. Use the sqlite3 command line command to delete, first sqlite3 your database files, then tables; List all tables and then delete them with SQL statement delete from….

  3. Let’s just change the models.py file so it doesn’t return the name, so we can delete it and change it back.

Since 3 is the easiest, let’s choose 3:

Then restart the service and refresh the page. Notice that although I changed models.py, I didn’t move the data structure, so I didn’t need to execute those two synchronization commands. You just restart the service.

Ok, now the background steps list displays this ID:

Then let’s delete them all

Delete done ~

How about, many problems are not surprised that the author has a variety of solutions, in fact, these are trample pit, all tears ~

Then we change models.py back to:

Ok, with that little interlude over, let’s move on to the next:

Here’s the sliding list of steps, with the close button not working:

As shown above, we add the onclick function to close the left div.

And I’m going to create this function down here, very simple one line of code.

good

Now let’s start the final episode, which is the reaction of some students, the menu on the left is obscured by the list of steps

In fact, I’m going to use the Z-index to solve the hierarchical masking problem, which is up to 999.

We can change the z-index of the div from 998 to 2:

This can be larger than the use case list, which is 1, but lower than the left menu.

Then refresh the page to see the effect:

Found that the left menu can be displayed successfully.

All right, let’s get back to the main story. One important thing we seem to have forgotten at this point is to automatically delete the following steps when deleting a project/use case. So let’s go back to views.py and find the code to delete the use case and add the following line:

Deleting an item is a bit more cumbersome: Because there are multiple use cases under one project and multiple steps under one use case, but the step field does not store the project ID. What do we do in this case?

The simplest way to do this is to write a loop through the delete:

. Ok, let’s test it out:

I created a new project – Interface – Use Case – Step. Then delete the project, and go to the background to see if everything is clean.

Ok, all deleted clean ~ specific process will not screenshots.

And then we go back to the main line. Write the delete function in this small step:

In p_cases.html, find where the delete button after this little step should be written, which is in the function of our refresh step ~

Write as follows:

Note that js is more complex here and is best copied. We made a button as a delete button, and the onclick property of the button must be written here. And then the internal URL contains the id of this step, how do you pass it in? This. Idd gets its IDD value.

Function refresh_left_div(case_id) {var d = document.getelementById ('small_list'); d.innerHTML = ''; / / empty the old data $. Get ('/get_small/' {' case_id: case_id}, function (ret) {/ / analytical ret and show. res = eval(ret); all_steps = res.all_steps; for(var i=0; i<all_steps.length; Var bu = document.createElement('button'); bu.style = 'margin-top: 5px; width: 90%; background-color: #f5f3f3; '; bu.className = 'btn btn-defaul'; bu.innerText = all_steps[i].name; bu.id = 'step_btn_'+all_steps[i].id; Var del = document.createElement('button'); del.className ='btn btn-default'; del.style.fontSize = 'xx-small'; del.innerText = 'delete'; del.style.height = '28px'; del.style.cssFloat='right'; del.style.marginTop='8px'; del.idd = all_steps[i].id; del.onclick = function(){ $.get('/delete_step/'+this.idd+'/',{ },function (ret) { refresh_left_div(document.getElementById('Case_id').innerText) }) }; d.appendChild(bu); d.appendChild(del); }})}Copy the code

The effect is as follows:

Then write urls.py:

Finally go to the background implementation:

Restart the service/refresh the page, let’s test:

The ~ was successfully deleted. Procedure

But you think that’s the end of it?

Don’t ~

We’re missing the point:

I will now display the index execution order of these steps on the page so that we can debug them later.

And don’t forget that we used to refresh the function to get only id and name, but now we need to add index because of the sort order:

To:

Then restart the service and refresh the page:

Look at the results:

Ok, now it’s in order of execution.

So here’s the question:

If I delete step 2, what about the remaining steps? Are they numbered 1 and 3, or 1 and 2 (3 automatically becomes 2)?

The way we use it, we want the latter. So our step is to delete the background function. It is necessary to advance the sequence number of all steps under this large use case after this step by one ~

Ok, open views.py and let’s rewrite the del_step function ~

For the first time, double filters and the greater than writing field __gt = are used

We restart the service and refresh the page. To test the effect of removing the middle second:

As you can see in the figure, the order of execution of the third item changes from 3 to 2

We can add more and delete to see what happens:

Now I’m going to delete the third clause:

Delete item 1:

Delete the last item:

Ok, all successful, no errors. And the rest of the steps are still in perfect order

This section is a bit difficult, please add it to our discussion group